Merge commit '49098308db4c80624889bb1b3fe84239c3a79e3e' into patch/4.5.x-master-dev

App.js

@@ -20,6 +20,8 @@ import Setting from "./components/settings.js";
 import TrainMenu from "./components/trainMenu.js";
 import FavoriteList from "./components/FavoriteList.js";
 import { LogBox } from "react-native";
+import useInterval from "./lib/useInterval";
+import { HeaderConfig } from "./lib/HeaderConfig";
 
 LogBox.ignoreLogs([
   "ViewPropTypes will be removed",
@@ -65,6 +67,30 @@ export default function App() {
       });
   }, []);
 
+  const [currentTrain, setCurrentTrain] = useState([]); //現在在線中の全列車 { num: 列車番号, delay: 遅延時分(状態), Pos: 位置情報 }
+  const [currentTrainLoading, setCurrentTrainLoading] = useState("loading"); // success, error, loading
+  const getCurrentTrain = () =>
+    fetch(
+      "https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train",
+      HeaderConfig
+    )
+      .then((response) => response.json())
+      .then((d) =>
+        d.map((x) => ({ num: x.TrainNum, delay: x.delay, Pos: x.Pos }))
+      )
+      .then((d) => {
+        setCurrentTrain(d);
+        setCurrentTrainLoading("success");
+      })
+      .catch((e) => {
+        console.log("えらー");
+        setCurrentTrainLoading("error");
+      });
+
+  useEffect(getCurrentTrain, []); //初回だけ現在の全在線列車取得
+
+  useInterval(getCurrentTrain, 15000); //15秒毎に全在線列車取得
+
   return (
     <NavigationContainer name="Root" style={{ flex: 1 }}>
       <Tab.Navigator detachInactiveScreens={false}>
@@ -83,6 +109,12 @@ export default function App() {
               favoriteStation={favoriteStation}
               setFavoriteStation={setFavoriteStation}
               busAndTrainData={busAndTrainData}
+              currentTrainState={{ currentTrain, setCurrentTrain }}
+              currentTrainLoadingState={{
+                currentTrainLoading,
+                setCurrentTrainLoading,
+              }}
+              getCurrentTrain={getCurrentTrain}
             />
           )}
         </Tab.Screen>
@@ -101,6 +133,12 @@ export default function App() {
               favoriteStation={favoriteStation}
               setFavoriteStation={setFavoriteStation}
               busAndTrainData={busAndTrainData}
+              currentTrainState={{ currentTrain, setCurrentTrain }}
+              currentTrainLoadingState={{
+                currentTrainLoading,
+                setCurrentTrainLoading,
+              }}
+              getCurrentTrain={getCurrentTrain}
             />
           )}
         </Tab.Screen>
@@ -142,6 +180,9 @@ const Top = ({
   favoriteStation,
   setFavoriteStation,
   busAndTrainData,
+  currentTrainState,
+  currentTrainLoadingState,
+  getCurrentTrain,
 }) => {
   const webview = useRef();
 
@@ -178,6 +219,9 @@ const Top = ({
             setFavoriteStation={setFavoriteStation}
             busAndTrainData={busAndTrainData}
             stationData={mapsStationData}
+            currentTrainState={currentTrainState}
+            currentTrainLoadingState={currentTrainLoadingState}
+            getCurrentTrain={getCurrentTrain}
           />
         )}
       </Stack.Screen>
@@ -194,7 +238,6 @@ const Top = ({
       <Stack.Screen
         name="howto"
         options={{
-          title: "使い方",
           ...optionData,
         }}
       >
@@ -234,6 +277,9 @@ function MenuPage({
   favoriteStation,
   setFavoriteStation,
   busAndTrainData,
+  currentTrainState,
+  currentTrainLoadingState,
+  getCurrentTrain,
 }) {
   useEffect(() => {
     const unsubscribe = navigation.addListener("tabPress", (e) => {
@@ -265,6 +311,9 @@ function MenuPage({
             favoriteStation={favoriteStation}
             setFavoriteStation={setFavoriteStation}
             busAndTrainData={busAndTrainData}
+            currentTrainState={currentTrainState}
+            currentTrainLoadingState={currentTrainLoadingState}
+            getCurrentTrain={getCurrentTrain}
           />
         )}
       </Stack.Screen>
@@ -284,6 +333,14 @@ function MenuPage({
       >
         {(props) => <TrainBase {...props} />}
       </Stack.Screen>
+      <Stack.Screen
+        name="howto"
+        options={{
+          ...optionData,
+        }}
+      >
+        {(props) => <HowTo {...props} />}
+      </Stack.Screen>
     </Stack.Navigator>
   );
 }

Apps.js

@@ -15,6 +15,8 @@ import { getStationList, lineList } from "./lib/getStationList";
 import { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView";
 import { injectJavascriptData } from "./lib/webViewInjectjavascript";
 import { getStationList2 } from "./lib/getStationList2";
+import { EachTrainInfo } from "./components/ActionSheetComponents/EachTrainInfo";
+import { checkDuplicateTrainData } from "./lib/checkDuplicateTrainData";
 /* 
 import StatusbarDetect from './StatusbarDetect';
 var Status = StatusbarDetect(); */
@@ -26,7 +28,13 @@ export default function Apps({
   setFavoriteStation,
   busAndTrainData,
   stationData,
+  currentTrainState,
+  currentTrainLoadingState,
+  getCurrentTrain,
 }) {
+  const { currentTrain, setCurrentTrain } = currentTrainState;
+  const { currentTrainLoading, setCurrentTrainLoading } =
+    currentTrainLoadingState;
   const { navigate } = navigation;
   var urlcache = "";
 
@@ -35,11 +43,20 @@ export default function Apps({
   const [mapSwitch, setMapSwitch] = useState(undefined);
   const [stationMenu, setStationMenu] = useState(undefined);
 
+  //列車情報表示関連
+  const EachTrainInfoAsSR = useRef(null);
+  const [trainInfo, setTrainInfo] = useState({
+    trainNum: undefined,
+    limited: undefined,
+    trainData: undefined,
+  });
+
   //駅情報画面用
   const StationBoardAcSR = useRef(null);
   const [stationBoardData, setStationBoardData] = useState(undefined);
   const [originalStationList, setOriginalStationList] = useState();
   const [selectedStation, setSelectedStation] = useState(undefined);
+  const [trainMenu, setTrainMenu] = useState("true");
   let once = false;
   useEffect(() => {
     getStationList().then(setOriginalStationList);
@@ -50,7 +67,8 @@ export default function Apps({
   const injectJavascript = injectJavascriptData(
     mapSwitch,
     iconSetting,
-    stationMenu
+    stationMenu,
+    trainMenu
   );
 
   useEffect(() => {
@@ -102,9 +120,23 @@ export default function Apps({
         AS.setItem("stationSwitch", "true").then(Updates.reloadAsync)
       );
   }, []);
+  useEffect(() => {
+    //列車メニュースイッチ
+    AS.getItem("trainSwitch")
+      .then((d) => {
+        if (d) {
+          setTrainMenu(d);
+        } else {
+          AS.setItem("trainSwitch", "true").then(Updates.reloadAsync);
+        }
+      })
+      .catch((d) =>
+        AS.setItem("trainSwitch", "true").then(Updates.reloadAsync)
+      );
+  }, []);
 
   const onMessage = (event) => {
-    if (!event.nativeEvent.data.includes("PopUpMenu")) {
+    if (event.nativeEvent.data.includes("train.html")) {
       navigate("trainbase", { info: event.nativeEvent.data, from: "Train" });
       return;
     }
@@ -112,18 +144,16 @@ export default function Apps({
       alert("駅名標データを取得中...");
       return;
     }
-    const selectedStationPDFAddress = event.nativeEvent.data
+    const dataSet = JSON.parse(event.nativeEvent.data);
-      .split(",")[3]
+    switch (dataSet.type) {
-      .replace("'", "")
+      case "PopUpMenu": {
-      .replace("'", "");
+        const selectedStationPDFAddress = dataSet.pdf;
-
         const findStationEachLine = (selectLine) => {
           let NearStation = selectLine.filter(
             (d) => d.StationTimeTable == selectedStationPDFAddress
           );
           return NearStation;
         };
-
         let returnDataBase = lineList
           .map((d) => findStationEachLine(originalStationList[d]))
           .filter((d) => d.length > 0)
@@ -131,15 +161,33 @@ export default function Apps({
             pre.push(...current);
             return pre;
           }, []);
+
         if (returnDataBase.length) {
           setStationBoardData(returnDataBase);
-      StationBoardAcSR.current?.setModalVisible();
+          StationBoardAcSR.current?.show();
         } else {
           setStationBoardData(undefined);
           StationBoardAcSR.current?.hide();
         }
-
         return;
+      }
+      case "ShowTrainTimeInfo": {
+        const { trainNum, limited } = dataSet;
+        //alert(trainNum, limited);
+        setTrainInfo({
+          trainNum,
+          limited,
+          trainData: checkDuplicateTrainData(
+            currentTrain.filter((a) => a.num == trainNum)
+          ),
+        }); //遅延情報は未実装
+        EachTrainInfoAsSR.current?.show();
+        return;
+      }
+      default: {
+        return;
+      }
+    }
   };
 
   const onNavigationStateChange = (event) => {
@@ -148,7 +196,7 @@ export default function Apps({
       urlcache = event.url;
 
       if (event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")) {
-        if (Platform.OS === "android") navigate("howto");
+        if (Platform.OS === "android") navigate("howto", { info: event.url });
         webview?.current.goBack();
         //Actions.howto();
       } else if (
@@ -161,7 +209,48 @@ export default function Apps({
       }
     }
   };
+  function sleep(waitSec, callbackFunc) {
+    // 経過時間（秒）
+    var spanedSec = 0;
 
+    // 1秒間隔で無名関数を実行
+    var id = setInterval(function () {
+      spanedSec++;
+
+      // 経過時間 >= 待機時間の場合、待機終了。
+      if (spanedSec >= waitSec) {
+        // タイマー停止
+        clearInterval(id);
+
+        // 完了時、コールバック関数を実行
+        if (callbackFunc) callbackFunc();
+      }
+    }, 1);
+  }
+
+  const openStationACFromEachTrainInfo = (stationName) => {
+    EachTrainInfoAsSR.current?.hide();
+    const findStationEachLine = (selectLine) => {
+      let NearStation = selectLine.filter((d) => d.Station_JP == stationName);
+      return NearStation;
+    };
+    let returnDataBase = lineList
+      .map((d) => findStationEachLine(originalStationList[d]))
+      .filter((d) => d.length > 0)
+      .reduce((pre, current) => {
+        pre.push(...current);
+        return pre;
+      }, []);
+    if (returnDataBase.length) {
+      setStationBoardData(returnDataBase);
+      sleep(25, function () {
+        StationBoardAcSR.current?.show();
+      });
+    } else {
+      setStationBoardData(undefined);
+      StationBoardAcSR.current?.hide();
+    }
+  };
   return (
     <View
       style={{
@@ -224,6 +313,18 @@ export default function Apps({
         favoriteStation={favoriteStation}
         setFavoriteStation={setFavoriteStation}
         busAndTrainData={busAndTrainData}
+        navigate={navigate}
+        onExit={() => {
+          StationBoardAcSR.current?.setModalVisible();
+          navigate("Apps");
+        }}
+      />
+      <EachTrainInfo
+        setRef={EachTrainInfoAsSR}
+        data={trainInfo}
+        navigate={navigate}
+        originalStationList={originalStationList}
+        openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
       />
     </View>
   );

app.json

@@ -22,7 +22,7 @@
       "**/*"
     ],
     "ios": {
-      "buildNumber": "26",
+      "buildNumber": "28",
       "supportsTablet": true,
       "bundleIdentifier": "jrshikokuinfo.xprocess.hrkn",
       "config": {

components/ActionSheetComponents/EachTrainInfo.js

@@ -0,0 +1,713 @@
+import React, { useEffect, useState } from "react";
+import {
+  View,
+  LayoutAnimation,
+  ScrollView,
+  Linking,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  TouchableHighlight,
+  Platform,
+} from "react-native";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import ActionSheet from "react-native-actions-sheet";
+import { AS } from "../../storageControl";
+import LottieView from "lottie-react-native";
+import trainList from "../../assets/originData/trainList";
+import { lineList } from "../../lib/getStationList";
+import {
+  heightPercentageToDP,
+  widthPercentageToDP,
+} from "react-native-responsive-screen";
+import lineColorList from "../../assets/originData/lineColorList";
+
+export const EachTrainInfo = ({
+  setRef,
+  data,
+  navigate,
+  originalStationList,
+  openStationACFromEachTrainInfo,
+  from,
+}) => {
+  const [trainData, setTrainData] = useState([]);
+  const [isTop, setIsTop] = useState(true);
+  const [currentPosition, setCurrentPosition] = useState([]);
+
+  const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
+
+  useEffect(() => {
+    //列車現在地アイコン表示スイッチ
+    AS.getItem("trainPositionSwitch")
+      .then((d) => {
+        if (d) {
+          setTrainPositionSwitch(d);
+        } else {
+        }
+      })
+      .catch((d) => AS.setItem("trainPositionSwitch", "false"));
+  }, []);
+
+  const getStationData = (stationName) => {
+    const Stations = stationList.map((a) =>
+      a.filter((d) => d.StationName == stationName)
+    );
+    const Station =
+      Stations &&
+      Stations.reduce((newArray, e) => {
+        return newArray.concat(e);
+      }, []);
+    if (!Station[0]) return [];
+    return Station.map((d) => d.StationNumber)[0];
+  };
+  useEffect(() => {
+    //data.trainData.Pos = "鴨川～端岡"; //test
+    if (!data.trainData?.Pos) return;
+    if (data.trainData?.Pos.match("～")) {
+      const pos = data.trainData?.Pos.replace("（下り）", "")
+        .replace("（上り）", "")
+        .split("～");
+      setCurrentPosition([getStationData(pos[0]), getStationData(pos[1])]);
+    } else {
+      setCurrentPosition([getStationData(data.trainData?.Pos)]);
+    }
+  }, [data.trainData]);
+
+  const stationList =
+    originalStationList &&
+    lineList.map((d) =>
+      originalStationList[d].map((a) => ({
+        StationNumber: a.StationNumber,
+        StationName: a.Station_JP,
+      }))
+    );
+  const stopStationIDList = trainData.map((i, index) => {
+    const [station, se, time] = i.split(",");
+    const Stations = stationList.map((a) =>
+      a.filter((d) => d.StationName == station)
+    );
+    const StationNumbers =
+      Stations &&
+      Stations.reduce((newArray, e) => {
+        return newArray.concat(e);
+      }, [])
+        .filter((d) => d.StationNumber)
+        .map((d) => d.StationNumber);
+    return StationNumbers[0];
+  });
+  function findReversalPoints(array) {
+    // arrayは現在位置の駅ID(駅在宅の場合は1つの配列、駅間の場合は2つの配列)
+    // stopStationIDListは停車駅の駅IDの配列
+    if (!stopStationIDList.length) return [];
+    const arrayNumber = array.map((d) => ({
+      line: d
+        .split("")
+        .filter((s) => "A" < s && s < "Z")
+        .join(""),
+      ID: d
+        .split("")
+        .filter((s) => "0" <= s && s <= "9")
+        .join(""),
+    }));
+    const stopStationIDListNumber = stopStationIDList.map((d) => {
+      if (!d) return { line: [], ID: [] };
+      return {
+        line: d
+          .split("")
+          .filter((s) => "A" < s && s < "Z")
+          .join(""),
+        ID: d
+          .split("")
+          .filter((s) => "0" <= s && s <= "9")
+          .join(""),
+      };
+    });
+    // 完全一致
+    if (array.length == 1) {
+      const index = stopStationIDList.indexOf(array[0]);
+      if (index != -1) return [index];
+      // 通過駅の場合
+      for (let i = 0; i < stopStationIDListNumber.length - 1; i++) {
+        if (stopStationIDListNumber[i].ID < arrayNumber[0].ID) {
+          if (stopStationIDListNumber[i + 1].ID > arrayNumber[0].ID) {
+            return [i + 1];
+          }
+        }
+        if (stopStationIDListNumber[i].ID > arrayNumber[0].ID) {
+          if (stopStationIDListNumber[i + 1].ID < arrayNumber[0].ID) {
+            return [i + 1];
+          }
+        }
+      }
+    }
+    // 駅間の場合
+    if (array.length == 2) {
+      const index1 = stopStationIDList.indexOf(array[0]);
+      const index2 = stopStationIDList.indexOf(array[1]);
+      if (index1 != -1 && index2 != -1) {
+        // 駅間で通過駅も無い場合
+        if (index1 < index2) {
+          if (index1 + 1 == index2) {
+            return [index2];
+          } else {
+            const returnArray = [];
+            for (let i = index1 + 1; i <= index2; i++) {
+              returnArray.push(i);
+            }
+            return returnArray;
+          }
+        }
+        if (index1 > index2) {
+          if (index2 + 1 == index1) return [index1];
+          else {
+            const returnArray = [];
+            for (let i = index2 + 1; i <= index1; i++) {
+              returnArray.push(i);
+            }
+            return returnArray;
+          }
+        }
+      } else {
+        const getNearStationID = (stationID) => {
+          for (let i = 0; i <= stopStationIDListNumber.length; i++) {
+            if (stopStationIDListNumber[i].ID < stationID) {
+              if (stopStationIDListNumber[i + 1].ID > stationID) {
+                return i + 1;
+              }
+            }
+            if (stopStationIDListNumber[i].ID > stationID) {
+              if (stopStationIDListNumber[i + 1].ID < stationID) {
+                return i + 1;
+              }
+            }
+          }
+        };
+        let newIndex1 = index1;
+        let newIndex2 = index2;
+        if (index1 == -1) {
+          newIndex1 = getNearStationID(arrayNumber[0].ID);
+        }
+        if (index2 == -1) {
+          newIndex2 = getNearStationID(arrayNumber[1].ID);
+        }
+        if (newIndex1 && newIndex2) {
+          return [newIndex1, newIndex2];
+        }
+
+        // 通過駅の場合
+      }
+
+      return [];
+    }
+  }
+  // 使用例
+  const points =
+    trainPositionSwitch == "true" ? findReversalPoints(currentPosition) : [];
+
+  useEffect(() => {
+    setIsTop(true);
+    if (!data.trainNum) return;
+    const TD = trainList[data.trainNum];
+    if (!TD) {
+      setTrainData([]);
+      return;
+    }
+    setTrainData(TD.split("#").filter((d) => d != ""));
+  }, [data]);
+  const getType = (string) => {
+    switch (string) {
+      case "express":
+        return "特急";
+      case "rapid":
+        return "快速";
+      default:
+        return "";
+    }
+  };
+
+  const migrateTrainName = (string) => {
+    return string
+      .replace("マリン", "マリンライナー")
+      .replace("ライナーライナー", "ライナー");
+  };
+
+  return (
+    <ActionSheet
+      ref={setRef}
+      gestureEnabled={isTop}
+      CustomHeaderComponent={<></>}
+    >
+      <View
+        style={{
+          backgroundColor: "#0099CC",
+          borderRadius: 5,
+          borderColor: "dark",
+          borderWidth: 1,
+        }}
+      >
+        <View style={{ height: 26, width: "100%" }}>
+          <View
+            style={{
+              height: 6,
+              width: 45,
+              borderRadius: 100,
+              backgroundColor: "#f0f0f0",
+              marginVertical: 10,
+              alignSelf: "center",
+            }}
+          />
+        </View>
+        <View
+          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
+        >
+          <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+            {data.limited
+              ? getType(data.limited.split(":")[0]) +
+                migrateTrainName(
+                  data.limited.split(":")[1] ||
+                    (trainData.length > 0
+                      ? trainData[trainData.length - 1].split(",")[0] + "行き"
+                      : " ")
+                )
+              : ""}
+          </Text>
+          <View style={{ flex: 1 }} />
+          <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+            {data.trainNum}
+          </Text>
+          {data.limited != undefined &&
+            getType(data.limited.split(":")[0]) &&
+            !data.limited.split(":")[1].match("サンポート") && (
+              <Ionicons
+                name="subway"
+                color="white"
+                size={30}
+                style={{ margin: 5 }}
+                onPress={() => {
+                  LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
+
+                  navigate("trainbase", {
+                    info: "train.html?tn=" + data.trainNum,
+                    from,
+                  });
+                  setRef.current?.hide();
+                }}
+              />
+            )}
+        </View>
+        <ScrollView
+          style={{
+            flexDirection: "row",
+            //width: widthPercentageToDP("200%"),
+            height: heightPercentageToDP("20%"),
+          }}
+          horizontal
+          pagingEnabled
+        >
+          <View
+            style={{
+              flexDirection: "row",
+              height: heightPercentageToDP("20%"),
+              width: widthPercentageToDP("100%"),
+            }}
+          >
+            <View
+              style={{
+                flex: 1,
+                backgroundColor: "white",
+                borderRadius: 10,
+                padding: 10,
+                margin: 10,
+              }}
+            >
+              <Text style={{ fontSize: 15, color: "#0099CC" }}>
+                現在地 {currentPosition.toString()}
+              </Text>
+              <View style={{ flex: 1 }} />
+              {data.trainData?.Pos && data.trainData?.Pos.match("～") ? (
+                <>
+                  <Text
+                    style={{
+                      fontSize: 28,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    {
+                      data.trainData?.Pos.replace("（下り）", "")
+                        .replace("（上り）", "")
+                        .split("～")[0]
+                    }
+                  </Text>
+                  <Text style={{ color: "#0099CC", textAlign: "right" }}>
+                    ～
+                  </Text>
+                  <Text
+                    style={{
+                      fontSize: 28,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    {
+                      data.trainData?.Pos.replace("（下り）", "")
+                        .replace("（上り）", "")
+                        .split("～")[1]
+                    }
+                  </Text>
+                </>
+              ) : (
+                <Text
+                  style={{ fontSize: 28, color: "#0099CC", textAlign: "right" }}
+                >
+                  {data.trainData?.Pos}
+                </Text>
+              )}
+            </View>
+            <View style={{ flex: 1, flexDirection: "column" }}>
+              <View
+                style={{
+                  flex: 1,
+                  backgroundColor: "white",
+                  borderRadius: 10,
+                  padding: 10,
+                  margin: 10,
+                }}
+              >
+                <Text style={{ fontSize: 15, color: "#0099CC" }}>
+                  {isNaN(data.trainData?.delay) ? "状態" : "遅延時分"}
+                </Text>
+                <View style={{ flex: 1 }} />
+                <Text
+                  style={{
+                    fontSize: 32,
+                    color: "#0099CC",
+                    textAlign: "right",
+                  }}
+                >
+                  {data.trainData?.delay}
+                  {isNaN(data.trainData?.delay) ? "" : "分"}
+                </Text>
+              </View>
+              <View
+                style={{
+                  flex: 1,
+                  backgroundColor: "white",
+                  borderRadius: 10,
+                  padding: 10,
+                  margin: 10,
+                }}
+              >
+                <Text style={{ fontSize: 15, color: "#0099CC" }}>列番</Text>
+                <Text
+                  style={{
+                    fontSize: 32,
+                    color: "#0099CC",
+                    textAlign: "right",
+                  }}
+                >
+                  {data.trainData?.num}
+                </Text>
+              </View>
+            </View>
+          </View>
+          {/* <View
+            style={{
+              flexDirection: "column",
+              height: heightPercentageToDP("20%"),
+              flex: 1,
+              width: widthPercentageToDP("100%"),
+            }}
+          >
+            <View style={{ flex: 1, flexDirection: "row" }}>
+              <View
+                style={{
+                  flex: 1,
+                  backgroundColor: "white",
+                  borderRadius: 10,
+                  padding: 10,
+                  margin: 10,
+                }}
+              >
+                <Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
+                <View style={{ flex: 1 }} />
+                <Text
+                  style={{
+                    fontSize: 20,
+                    color: "#0099CC",
+                    textAlign: "right",
+                  }}
+                >
+                  岡山
+                </Text>
+              </View>
+
+              <View
+                style={{
+                  flex: 3,
+                  backgroundColor: "white",
+                  borderRadius: 10,
+                  padding: 10,
+                  margin: 10,
+                }}
+              >
+                <Text style={{ fontSize: 15, color: "#0099CC" }}>車両案内</Text>
+                <View style={{ flex: 1 }} />
+                <Text
+                  style={{
+                    fontSize: 20,
+                    color: "#0099CC",
+                    textAlign: "right",
+                  }}
+                >
+                  宇多津でうずしお号と連結
+                </Text>
+              </View>
+            </View>
+            <View style={{ flex: 1, flexDirection: "row" }}>
+              <View
+                style={{
+                  flex: 1,
+                  backgroundColor: "white",
+                  borderRadius: 10,
+                  padding: 10,
+                  margin: 10,
+                }}
+              >
+                <Text style={{ fontSize: 15, color: "#0099CC" }}>
+                  編成(使用車両：2700系)
+                </Text>
+                <View style={{ flex: 1 }} />
+                <Text
+                  style={{
+                    fontSize: 20,
+                    color: "#0099CC",
+                    textAlign: "left",
+                  }}
+                >
+                  {"[<自][自>][アン自|指>][アン指|G>]"}
+                </Text>
+              </View>
+            </View>
+          </View> */}
+        </ScrollView>
+        <ScrollView
+          style={{ maxHeight: heightPercentageToDP("55%") }}
+          nestedScrollEnabled
+          onScroll={(e) => {
+            if (!Platform.OS !== "android") return;
+            setIsTop(e.nativeEvent.contentOffset.y < 0);
+          }}
+        >
+          <View
+            style={{
+              padding: 10,
+              backgroundColor: "white",
+              borderBottomLeftRadius: 5,
+              borderBottomRightRadius: 5,
+            }}
+          >
+            <View style={{ alignItems: "center" }}>
+              {/* <LottieView
+                autoPlay
+                loop
+                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+                source={require("../../assets/51690-loading-diamonds.json")}
+              />
+              <Text>ほげほげふがふが</Text> */}
+              <View style={{ flexDirection: "row" }}>
+                <View
+                  style={{
+                    padding: 8,
+                    flexDirection: "row",
+                    borderBottomWidth: 1,
+                    borderBottomColor: "#f0f0f0",
+                    flex: 1,
+                  }}
+                >
+                  <Text style={{ fontSize: 20 }}>停車駅</Text>
+                  <View style={{ flex: 1 }} />
+                  <View style={{ flexDirection: "row" }}>
+                    {!isNaN(data.trainData?.delay) &&
+                      data.trainData?.delay != 0 && (
+                        <Text
+                          style={{
+                            fontSize: 15,
+                            color: "black",
+                            position: "absolute",
+                            right: 110,
+                            textAlign: "right",
+                            textDecorationLine: "line-through",
+                          }}
+                        >
+                          (定刻)
+                        </Text>
+                      )}
+                    <Text
+                      style={{
+                        fontSize: 20,
+                        color: isNaN(data.trainData?.delay)
+                          ? "black"
+                          : data.trainData?.delay == 0
+                          ? "black"
+                          : "red",
+                        width: 60,
+                      }}
+                    >
+                      見込
+                    </Text>
+                    <Text style={{ fontSize: 20, width: 50 }}></Text>
+                  </View>
+                </View>
+              </View>
+              {trainData.map((i, index) => {
+                const [station, se, time] = i.split(",");
+                const Stations = stationList.map((a) =>
+                  a.filter((d) => d.StationName == station)
+                );
+                const StationNumbers =
+                  Stations &&
+                  Stations.reduce((newArray, e) => {
+                    return newArray.concat(e);
+                  }, [])
+                    .filter((d) => d.StationNumber)
+                    .map((d) => d.StationNumber);
+
+                const colorIDs =
+                  StationNumbers != null
+                    ? StationNumbers.map((d) => {
+                        return d.split("").filter((s) => "A" < s && s < "Z");
+                      }).reduce((newArray, e) => {
+                        return newArray.concat(e);
+                      }, [])
+                    : [];
+                const EachIDs =
+                  StationNumbers != null
+                    ? StationNumbers.map((d) => {
+                        return d
+                          .split("")
+                          .filter((s) => "0" <= s && s <= "9")
+                          .join("");
+                      })
+                    : [];
+                const date = new Date();
+                if (time) {
+                  date.setHours(time.split(":")[0], time.split(":")[1]);
+                }
+                if (!isNaN(data.trainData?.delay)) {
+                  date.setMinutes(date.getMinutes() + data.trainData?.delay);
+                }
+                const timeString = date.toTimeString().split(" ")[0].split(":");
+                return (
+                  <TouchableWithoutFeedback
+                    onPress={() => openStationACFromEachTrainInfo(station)}
+                    key={station}
+                  >
+                    <View style={{ flexDirection: "row" }}>
+                      <View
+                        style={{
+                          width: 35,
+                          position: "relative",
+                          marginHorizontal: 15,
+                          flexDirection: "row",
+                          height: "101%",
+                        }}
+                      >
+                        {colorIDs.map((color, index) => (
+                          <View
+                            style={{
+                              backgroundColor: lineColorList[color],
+                              flex: 1,
+                            }}
+                            key={color}
+                          >
+                            <View style={{ flex: 1 }} />
+                            <Text
+                              style={{
+                                color: "white",
+                                textAlign: "center",
+                                fontSize: 10,
+                                fontWeight: "bold",
+                              }}
+                            >
+                              {colorIDs[index]}
+                            </Text>
+                            <Text
+                              style={{
+                                color: "white",
+                                textAlign: "center",
+                                fontSize: 10,
+                                fontWeight: "bold",
+                              }}
+                            >
+                              {EachIDs[index]}
+                            </Text>
+                            <View style={{ flex: 1 }} />
+                          </View>
+                        ))}
+                      </View>
+                      <View
+                        style={{
+                          padding: 8,
+                          flexDirection: "row",
+                          borderBottomWidth: 1,
+                          borderBottomColor: "#f0f0f0",
+                          flex: 1,
+                        }}
+                      >
+                        <Text style={{ fontSize: 20 }}>{station}</Text>
+                        <View style={{ flex: 1 }} />
+                        {points.findIndex((d) => d == index) >= 0 ? (
+                          <Text
+                            style={{
+                              fontSize: 20,
+                              marginRight: 70,
+                            }}
+                          >
+                            🚊
+                          </Text>
+                        ) : null}
+                        {!isNaN(data.trainData?.delay) &&
+                          data.trainData?.delay != 0 && (
+                            <Text
+                              style={{
+                                fontSize: 15,
+                                color: "black",
+                                width: 60,
+                                position: "absolute",
+                                right: 120,
+                                textAlign: "right",
+                                textDecorationLine: "line-through",
+                              }}
+                            >
+                              {time}
+                            </Text>
+                          )}
+                        <Text
+                          style={{
+                            fontSize: 20,
+                            color: isNaN(data.trainData?.delay)
+                              ? "black"
+                              : data.trainData?.delay == 0
+                              ? "black"
+                              : "red",
+                            width: 60,
+                          }}
+                        >
+                          {timeString[0]}:{timeString[1]}
+                        </Text>
+                        <Text style={{ fontSize: 18, width: 50 }}>
+                          {se?.replace("発", "出発").replace("着", "到着")}
+                        </Text>
+                      </View>
+                    </View>
+                  </TouchableWithoutFeedback>
+                );
+              })}
+            </View>
+          </View>
+        </ScrollView>
+      </View>
+    </ActionSheet>
+  );
+};

components/ActionSheetComponents/StationDeteilView.js

@@ -20,6 +20,7 @@ import {
   heightPercentageToDP as hp,
 } from "react-native-responsive-screen";
 import lineColorList from "../../assets/originData/lineColorList";
+import { getPDFViewURL } from "../../lib/getPdfViewURL";
 
 export const StationDeteilView = (props) => {
   const {
@@ -29,6 +30,8 @@ export const StationDeteilView = (props) => {
     favoriteStation,
     setFavoriteStation,
     busAndTrainData,
+    navigate,
+    onExit,
   } = props;
   const [trainBus, setTrainBus] = useState();
   useEffect(() => {
@@ -41,7 +44,11 @@ export const StationDeteilView = (props) => {
     }
     setTrainBus(data[0]);
   }, [currentStation]);
-
+  const info =
+    currentStation &&
+    (currentStation[0].StationTimeTable.match(".pdf")
+      ? getPDFViewURL(currentStation[0].StationTimeTable)
+      : currentStation[0].StationTimeTable);
   return (
     <ActionSheet
       ref={StationBoardAcSR}
@@ -82,7 +89,14 @@ export const StationDeteilView = (props) => {
                 originalStationList={originalStationList}
                 favoriteStation={favoriteStation}
                 setFavoriteStation={setFavoriteStation}
-                oP={() => Linking.openURL(currentStation[0].StationTimeTable)}
+                oP={() => {
+                  navigate("howto", {
+                    info,
+                    onExit,
+                  });
+                  StationBoardAcSR.current?.hide();
+                }}
+                oLP={() => Linking.openURL(currentStation[0].StationTimeTable)}
               />
             </View>
           )}
@@ -99,6 +113,21 @@ export const StationDeteilView = (props) => {
             currentStation[0].JrHpUrl &&
             currentStation[0].StationNumber != "M12" && (
               <駅構内図 //高松/阿波池田&後免&須崎kounai.png児島例外/
+                oP={() => {
+                  navigate("howto", {
+                    info:
+                      currentStation[0].JrHpUrl.replace("/index.html", "/") +
+                      "/kounai_map.html",
+                    onExit,
+                  });
+                  StationBoardAcSR.current?.hide();
+                }}
+                oLP={() => {
+                  Linking.openURL(
+                    currentStation[0].JrHpUrl.replace("/index.html", "/") +
+                      "/kounai_map.html"
+                  );
+                }}
                 uri={currentStation[0].JrHpUrl.replace("/index.html", "/")}
               />
             )}
@@ -109,7 +138,14 @@ export const StationDeteilView = (props) => {
                   backgroundColor={"#AD7FA8"}
                   icon={<Foundation name="web" color="white" size={50} />}
                   flex={1}
-                  onPressButton={() =>
+                  onPressButton={() => {
+                    navigate("howto", {
+                      info: currentStation[0].JrHpUrl,
+                      onExit,
+                    });
+                    StationBoardAcSR.current?.hide();
+                  }}
+                  onLongPressButton={() =>
                     Linking.openURL(currentStation[0].JrHpUrl)
                   }
                 >
@@ -121,7 +157,14 @@ export const StationDeteilView = (props) => {
                   backgroundColor={"#8F5902"}
                   icon={<FontAwesome name="table" color="white" size={50} />}
                   flex={1}
-                  onPressButton={() =>
+                  onPressButton={() => {
+                    navigate("howto", {
+                      info,
+                      onExit,
+                    });
+                    StationBoardAcSR.current?.hide();
+                  }}
+                  onLongPressButton={() =>
                     Linking.openURL(currentStation[0].StationTimeTable)
                   }
                 >
@@ -145,7 +188,14 @@ export const StationDeteilView = (props) => {
                   backgroundColor={"#CE5C00"}
                   icon={<Ionicons name="bus" color="white" size={50} />}
                   flex={1}
-                  onPressButton={() => Linking.openURL(trainBus.address)}
+                  onPressButton={() => {
+                    navigate("howto", {
+                      info: trainBus.address,
+                      onExit,
+                    });
+                    StationBoardAcSR.current?.hide();
+                  }}
+                  onLongPressButton={() => Linking.openURL(trainBus.address)}
                 >
                   並行バス
                 </TicketBox>
@@ -312,7 +362,8 @@ const 駅構内図 = (props) => {
           alignItems: "center",
           margin: 2,
         }}
-        onPress={() => Linking.openURL(props.uri + "/kounai_map.html")}
+        onPress={props.oP}
+        onLongPress={props.oLP}
         //onPress={() => setOpen(!open)}
       >
         <View style={{ flex: 1 }} />

components/atom/TicketBox.js

@@ -1,7 +1,14 @@
 import { TouchableOpacity, Text } from "react-native";
 
 export const TicketBox = (props) => {
-  const { icon, backgroundColor, flex, onPressButton, children } = props;
+  const {
+    icon,
+    backgroundColor,
+    flex,
+    onPressButton,
+    children,
+    onLongPressButton,
+  } = props;
   return (
     <TouchableOpacity
       style={{
@@ -14,6 +21,7 @@ export const TicketBox = (props) => {
         alignItems: "center",
       }}
       onPress={onPressButton}
+      onLongPress={onLongPressButton}
     >
       <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
         {children}

components/custom-train-data.js

@@ -619,3 +619,37 @@ export const customTrainDataDetector = (TrainNumber) => {
       break;
   }
 };
+export const getJRF = (num) => {
+  switch (num) {
+    case "71":
+      return "東京(タ)→高松(タ)\\n";
+    case "73":
+    case "75":
+      return "大阪(タ)→高松(タ)\\n";
+    case "3079":
+      return "高松(タ)→伊予三島\\n";
+    case "3071":
+    case "3077":
+      return "高松(タ)→新居浜\\n";
+    case "3073":
+      return "高松(タ)→松山貨物\\n";
+    case "70":
+      return "高松(タ)→東京(タ)\\n";
+    case "74":
+    case "76":
+      return "高松(タ)→大阪(タ)\\n";
+    case "3078":
+      return "伊予三島→高松(タ)\\n";
+    case "3070":
+      return "新居浜→高松(タ)\\n";
+    case "3076":
+      return "新居浜→高松(タ)\\n";
+    case "3072":
+      return "松山貨物→高松(タ)\\n";
+    case "9070":
+      return "臨時貨物\\n";
+    default:
+      JRF = true;
+      return null;
+  }
+};

components/settings.js

@@ -13,10 +13,14 @@ export default function Setting(props) {
   const [iconSetting, setIconSetting] = useState(undefined);
   const [mapSwitch, setMapSwitch] = useState(undefined);
   const [stationMenu, setStationMenu] = useState(undefined);
+  const [trainMenu, setTrainMenu] = useState(undefined);
+  const [trainPosition, setTrainPosition] = useState(undefined);
   useEffect(() => {
     AS.getItem("iconSwitch").then(setIconSetting);
     AS.getItem("mapSwitch").then(setMapSwitch);
     AS.getItem("stationSwitch").then(setStationMenu);
+    AS.getItem("trainSwitch").then(setTrainMenu);
+    AS.getItem("trainPositionSwitch").then(setTrainPosition);
   }, []);
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
@@ -83,7 +87,7 @@ export default function Setting(props) {
                 textAlignVertical: "center",
               }}
             >
-              駅メニューを表示(beta)
+              駅メニューを表示
             </Text>
             <View style={{ flex: 1 }} />
             <Switch
@@ -92,6 +96,44 @@ export default function Setting(props) {
               onValueChange={(value) => setStationMenu(value.toString())}
             />
           </View>
+          <View style={{ flexDirection: "row", padding: 10 }}>
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              列車メニュー
+            </Text>
+            <View style={{ flex: 1 }} />
+            <Switch
+              value={trainMenu == "true" ? true : false}
+              color={trainMenu == "true" ? "red" : null}
+              onValueChange={(value) => setTrainMenu(value.toString())}
+            />
+          </View>
+          <View style={{ flexDirection: "row", padding: 10 }}>
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              →列車現在位置表示(alpha)
+            </Text>
+            <View style={{ flex: 1 }} />
+            <Switch
+              value={trainPosition == "true" ? true : false}
+              color={trainPosition == "true" ? "red" : null}
+              onValueChange={(value) => setTrainPosition(value.toString())}
+            />
+          </View>
           <View style={{ flexDirection: "row", padding: 10 }}>
             <Text
               style={{
@@ -137,6 +179,8 @@ export default function Setting(props) {
             AS.setItem("iconSwitch", iconSetting.toString()),
             AS.setItem("mapSwitch", mapSwitch.toString()),
             AS.setItem("stationSwitch", stationMenu.toString()),
+            AS.setItem("trainSwitch", trainMenu.toString()),
+            AS.setItem("trainPositionSwitch", trainPosition.toString()),
           ]).then(() => {
             Updates.reloadAsync();
           });

components/trainMenu.js

@@ -58,7 +58,11 @@ export default function TrainMenu({
           backgroundColor={"#F89038"}
           icon="train-car"
           flex={1}
-          onPressButton={() => navigate("howto")}
+          onPressButton={() =>
+            navigate("howto", {
+              info: "https://train.jr-shikoku.co.jp/usage.htm",
+            })
+          }
         >
           使い方
         </UsefulBox>

components/発車時刻表/LED_vidion.js

@@ -6,8 +6,11 @@ import LottieView from "lottie-react-native";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { customTrainDataDetector } from "../custom-train-data";
 import { useInterval } from "../../lib/useInterval";
-import trainList from "../../assets/originData/trainList";
 import { objectIsEmpty } from "../../lib/objectIsEmpty";
+import { getTrainType } from "../../lib/getTrainType";
+import { HeaderConfig } from "../../lib/HeaderConfig";
+import { getTrainDelayStatus } from "../../lib/getTrainDelayStatus";
+import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
 
 let diagramData = undefined;
 
@@ -41,48 +44,23 @@ let diagramData = undefined;
  * 9062D 四国まんなか千年ものがたり(臨時？)
  */
 export default function LED_vision(props) {
-  const HeaderConfig = {
+  const {
-    headers: {
+    station,
-      referer: "https://train.jr-shikoku.co.jp/sp.html",
+    setTrainInfo,
-    },
+    EachTrainInfoAsSR,
-  };
+    trainDiagram,
-  const [trainDiagram, setTrainDiagram] = useState(null); // 全列車のダイヤを列番ベースで整理
+    currentTrainState,
+    currentTrainLoadingState,
+    getCurrentTrain,
+  } = props;
+  const { currentTrain, setCurrentTrain } = currentTrainState;
+  const { currentTrainLoading, setCurrentTrainLoading } =
+    currentTrainLoadingState;
   const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表
-  const [currentTrain, setCurrentTrain] = useState(null); //現在在線中の全列車
-  const [currentTrainLoading, setCurrentTrainLoading] = useState("loading");
   const [finalSwitch, setFinalSwitch] = useState(false);
   const [trainIDSwitch, setTrainIDSwitch] = useState(false);
   const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);
 
-  const parseAllTrainDiagram = (text) => {
-    const val = text.replace("[\r\n", "").split(",\r\n");
-    let trainDiagram = {};
-    val.forEach((element) => {
-      try {
-        let data = JSON.parse(element);
-        Object.keys(data).forEach((key) => (trainDiagram[key] = data[key]));
-      } catch (e) {}
-    });
-    return trainDiagram;
-  };
-
-  useEffect(() => {
-    //全列車リストを生成する副作用[無条件初回実行]
-    fetch(
-      "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=traintimeinfo&arg3=dia",
-      HeaderConfig
-    )
-      .then((response) => response.text())
-      .then((d) => {
-        if (d.indexOf("<title>404 Not Found</title>") != -1) throw Error;
-        setTrainDiagram(parseAllTrainDiagram(d));
-      })
-      .catch((d) => {
-        console.log("fallback");
-        setTrainDiagram(trainList);
-      });
-  }, []);
-
   useEffect(() => {
     // 現在の駅に停車するダイヤを作成する副作用[列車ダイヤと現在駅情報]
     if (!trainDiagram) {
@@ -91,52 +69,54 @@ export default function LED_vision(props) {
     }
     let returnData = {};
     Object.keys(trainDiagram).forEach((key) => {
-      if (trainDiagram[key].match(props.station.Station_JP + ",")) {
+      if (trainDiagram[key].match(station.Station_JP + ",")) {
         returnData[key] = trainDiagram[key];
       }
     });
     setStationDiagram(returnData);
-  }, [trainDiagram, props.station]);
+  }, [trainDiagram, station]);
 
-  const getCurrentTrain = () =>
+  const [trainTimeAndNumber, setTrainTimeAndNumber] = useState(null);
-    fetch(
-      "https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train",
-      HeaderConfig
-    )
-      .then((response) => response.json())
-      .then((d) =>
-        d.map((x) => ({ num: x.TrainNum, delay: x.delay, Pos: x.Pos }))
-      )
-      .then((d) => {
-        setCurrentTrain(d);
-        setCurrentTrainLoading("success");
-      })
-      .catch((e) => {
-        console.log("えらー");
-        setCurrentTrainLoading("error");
-      });
 
-  useEffect(getCurrentTrain, []); //初回だけ現在の全在線列車取得
+  useEffect(() => {
+    //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット
+    if (objectIsEmpty(stationDiagram)) return () => {};
+    const getTimeData = getTime(stationDiagram, station);
+    setTrainTimeAndNumber(getTimeData);
+  }, [stationDiagram]);
 
-  useInterval(getCurrentTrain, 15000); //15秒毎に全在線列車取得
+  const [selectedTrain, setSelectedTrain] = useState([]);
+  useEffect(() => {
+    if (!trainTimeAndNumber) return () => {};
+    if (!currentTrain) return () => {};
+    const data = trainTimeAndNumber
+      .filter((d) => currentTrain.map((m) => m.num).includes(d.train))
+      .filter(timeFiltering)
+      .filter((d) => !!finalSwitch || d.lastStation != "当駅止");
+    setSelectedTrain(data);
+  }, [trainTimeAndNumber, currentTrain, finalSwitch]);
 
   const getTime = (stationDiagram, station) => {
-    const returnData = Object.keys(stationDiagram).map((d) => {
+    const returnData = Object.keys(stationDiagram).map((trainNum) => {
-      let a = {};
+      let trainData = {};
-      stationDiagram[d].split("#").forEach((data) => {
+      stationDiagram[trainNum].split("#").forEach((data) => {
         if (data.match("着")) {
-          a.lastStation = data.split(",着,")[0];
+          trainData.lastStation = data.split(",着,")[0];
         }
         if (data.split(",")[0] === station.Station_JP) {
           if (data.match(",発,")) {
-            a.time = data.split(",発,")[1];
+            trainData.time = data.split(",発,")[1];
           } else {
-            a.time = data.split(",着,")[1];
+            trainData.time = data.split(",着,")[1];
-            a.lastStation = "当駅止";
+            trainData.lastStation = "当駅止";
           }
         }
       });
-      return { train: d, time: a.time, lastStation: a.lastStation };
+      return {
+        train: trainNum,
+        time: trainData.time,
+        lastStation: trainData.lastStation,
+      };
     });
     return returnData.sort((a, b) => {
       switch (true) {
@@ -152,15 +132,6 @@ export default function LED_vision(props) {
     });
   };
 
-  const [trainTimeAndNumber, setTrainTimeAndNumber] = useState(null);
-
-  useEffect(() => {
-    //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット
-    if (objectIsEmpty(stationDiagram)) return () => {};
-    const getTimeData = getTime(stationDiagram, props.station);
-    setTrainTimeAndNumber(getTimeData);
-  }, [stationDiagram]);
-
   const timeFiltering = (d) => {
     const date = new Date();
     const newDate = new Date();
@@ -178,16 +149,6 @@ export default function LED_vision(props) {
     return false;
   };
 
-  const [selectedTrain, setSelectedTrain] = useState([]);
-  useEffect(() => {
-    if (!trainTimeAndNumber) return () => {};
-    if (!currentTrain) return () => {};
-    const data = trainTimeAndNumber
-      .filter((d) => currentTrain.map((m) => m.num).includes(d.train))
-      .filter(timeFiltering)
-      .filter((d) => !!finalSwitch || d.lastStation != "当駅止");
-    setSelectedTrain(data);
-  }, [trainTimeAndNumber, currentTrain, finalSwitch]);
   return (
     <View
       style={{
@@ -208,10 +169,11 @@ export default function LED_vision(props) {
           d={d}
           trainIDSwitch={trainIDSwitch}
           trainDescriptionSwitch={trainDescriptionSwitch}
-          props={props}
+          station={station}
           currentTrain={currentTrain}
           customTrainDataDetector={customTrainDataDetector}
-          navigate={props.navigate}
+          setTrainInfo={setTrainInfo}
+          EachTrainInfoAsSR={EachTrainInfoAsSR}
         />
       ))}
       <Footer
@@ -270,56 +232,36 @@ const Header = ({
   </View>
 );
 
-const Footer = ({
+const Footer = (props) => {
+  const {
     trainIDSwitch,
     setTrainIDSwitch,
     trainDescriptionSwitch,
     setTrainDescriptionSwitch,
     finalSwitch,
     setFinalSwitch,
-}) => {
+  } = props;
+
+  const textStyle = {
+    alignItems: "center",
+    alignContent: "center",
+    textAlign: "center",
+    textAlignVertical: "center",
+    color: "white",
+  };
+
   return (
     <View style={{ flexDirection: "row", padding: 10, alignItems: "center" }}>
-      <Text
+      <Text style={textStyle}>種別名 / 列番</Text>
-        style={{
-          alignItems: "center",
-          alignContent: "center",
-          textAlign: "center",
-          textAlignVertical: "center",
-          color: "white",
-        }}
-      >
-        種別名 / 列番
-      </Text>
       <Switch value={trainIDSwitch} onValueChange={setTrainIDSwitch} />
       <View style={{ flex: 1 }} />
-      <Text
+      <Text style={textStyle}>列車情報</Text>
-        style={{
-          alignItems: "center",
-          alignContent: "center",
-          textAlign: "center",
-          textAlignVertical: "center",
-          color: "white",
-        }}
-      >
-        列車情報
-      </Text>
       <Switch
         value={trainDescriptionSwitch}
         onValueChange={setTrainDescriptionSwitch}
       />
       <View style={{ flex: 1 }} />
-      <Text
+      <Text style={textStyle}>当駅止表示</Text>
-        style={{
-          alignItems: "center",
-          alignContent: "center",
-          textAlign: "center",
-          textAlignVertical: "center",
-          color: "white",
-        }}
-      >
-        当駅止表示
-      </Text>
       <Switch value={finalSwitch} onValueChange={setFinalSwitch} />
     </View>
   );
@@ -329,27 +271,40 @@ const EachData = ({
   d,
   trainIDSwitch,
   trainDescriptionSwitch,
-  props,
+  station,
   currentTrain,
   customTrainDataDetector,
-  navigate,
+  setTrainInfo,
+  EachTrainInfoAsSR,
 }) => {
-  const getTrainType = (data) => {
+  const openTrainInfo = (d) => {
-    switch (data) {
+    let TrainNumber = "";
-      case "Rapid":
+    if (train.trainNumDistance != undefined) {
-        return { color: "aqua", name: "快速" };
+      const timeInfo =
-      case "LTDEXP":
+        parseInt(d.train.replace("M", "").replace("D", "")) -
-        return { color: "red", name: "特急" };
+        train.trainNumDistance;
-      case "NightLTDEXP":
+      TrainNumber = timeInfo + "号";
-        return { color: "red", name: "寝台特急" };
-      case "Normal":
-        return { color: "white", name: "普通列車" };
     }
+    setTrainInfo({
+      trainNum: d.train,
+      limited: `${getTrainType(train.type).data}:${
+        train.trainName
+      }${TrainNumber}`,
+      trainData: checkDuplicateTrainData(
+        currentTrain.filter((a) => a.num == d.train)
+      ),
+    });
+    EachTrainInfoAsSR.current?.show();
   };
   const [train, setTrain] = useState(customTrainDataDetector(d.train));
   useEffect(() => {
     setTrain(customTrainDataDetector(d.train));
   }, [currentTrain, d.train, trainDescriptionSwitch]);
+  // 土讃線複数存在対策
+  const trainDelayStatus = getTrainDelayStatus(
+    checkDuplicateTrainData(currentTrain.filter((a) => a.num == d.train)),
+    station.Station_JP
+  );
   return (
     <>
       <TouchableOpacity
@@ -362,78 +317,72 @@ const EachData = ({
           backgroundColor: "#000",
           flexDirection: "row",
         }}
-        onPress={() => {
+        onPress={() => openTrainInfo(d)}
-          if (train.type != "Normal") {
-            navigate("trainbase", {
-              info: "train.html?tn=" + d.train,
-              from: "LED",
-            });
-          }
-        }}
       >
         <TrainName
-          train={train}
+          trainName={train.trainName}
+          trainNumDistance={train.trainNumDistance}
           trainIDSwitch={trainIDSwitch}
-          d={d}
+          trainID={d.train}
-          getTrainType={getTrainType(train.type)}
+          type={train.type}
-        />
-        <LastStation d={d} />
-        <DependTime d={d} />
-        <StatusAndDelay
-          currentTrain={currentTrain}
-          d={d}
-          props={props}
-          trainDescriptionSwitch={trainDescriptionSwitch}
         />
+        <LastStation lastStation={d.lastStation} />
+        <DependTime time={d.time} />
+        <StatusAndDelay trainDelayStatus={trainDelayStatus} />
       </TouchableOpacity>
-      {trainDescriptionSwitch && !!train.info && <Description train={train} />}
+      {trainDescriptionSwitch && !!train.info && (
+        <Description info={train.info} />
+      )}
     </>
   );
 };
 
-const TrainName = ({ train, trainIDSwitch, d, getTrainType }) => {
+const TrainName = ({
-  const { trainName, trainNumDistance } = train;
+  trainName,
-  let TrainNumber = "";
+  trainNumDistance,
-  if (trainNumDistance != undefined) {
+  trainIDSwitch,
-    const timeInfo =
+  trainID,
-      parseInt(d.train.replace("M", "").replace("D", "")) - trainNumDistance;
+  type,
-    TrainNumber = timeInfo + "号";
+}) => {
-  }
+  const { name, color } = getTrainType(type);
+  let TrainNumber =
+    trainNumDistance != undefined
+      ? `${
+          parseInt(trainID.replace("M", "").replace("D", "")) - trainNumDistance
+        }号`
+      : "";
   return (
     <View style={{ flex: 9 }}>
       <Text
         style={{
           fontSize: trainName.length > 6 ? parseInt("13%") : parseInt("18%"),
-          color: getTrainType.color,
+          color: color,
           fontWeight: "bold",
         }}
       >
-        {trainIDSwitch
+        {trainIDSwitch ? trainID : `${name} ${trainName}${TrainNumber}`}
-          ? d.train
-          : `${getTrainType.name} ${trainName}${TrainNumber}`}
       </Text>
     </View>
   );
 };
 
-const LastStation = ({ d }) => {
+const LastStation = ({ lastStation }) => {
   return (
     <View style={{ flex: 4, flexDirection: "row" }}>
       <Text
         style={{
-          fontSize:
+          fontSize: lastStation.length > 4 ? parseInt("13%") : parseInt("18%"),
-            d.lastStation.length > 4 ? parseInt("13%") : parseInt("18%"),
           color: "white",
           fontWeight: "bold",
         }}
       >
-        {d.lastStation}
+        {lastStation}
       </Text>
     </View>
   );
 };
-const DependTime = ({ d }) => {
+
-  return (
+const DependTime = ({ time }) => (
   <View style={{ flex: 3 }}>
     <Text
       style={{
@@ -442,46 +391,12 @@ const DependTime = ({ d }) => {
         fontWeight: "bold",
       }}
     >
-        {d.time}
+      {time}
     </Text>
   </View>
 );
-};
 
-const checkDuplicateTrainData = (currentTrainArray) => {
+const StatusAndDelay = ({ trainDelayStatus }) => {
-  const notNyujoData = currentTrainArray.filter((d) => d.delay !== "入線");
-  if (currentTrainArray.length == 1) return currentTrainArray[0];
-  if (notNyujoData.length == 0) return currentTrainArray[0];
-  else return notNyujoData[0];
-};
-const StatusAndDelay = ({ currentTrain, d, props, trainDescriptionSwitch }) => {
-  const [status, setStatus] = useState("");
-  useEffect(() => {
-    const array = currentTrain.filter((a) => a.num == d.train);
-    const current = checkDuplicateTrainData(array);
-    // 土讃線複数存在対策
-    if (!current) return () => {};
-    const delay = current.delay;
-    switch (true) {
-      case delay === "入線":
-        if (current.Pos === props.station.Station_JP) {
-          setStatus("当駅始発");
-          break;
-        } else {
-          setStatus("発車前");
-          break;
-        }
-      case isNaN(delay):
-        setStatus(delay);
-        break;
-      case delay === 0:
-        setStatus("定刻通り");
-        break;
-      default:
-        setStatus(delay + "分遅れ");
-        break;
-    }
-  }, [currentTrain, d.train, trainDescriptionSwitch]);
   return (
     <View style={{ flex: 4 }}>
       <Text
@@ -492,13 +407,13 @@ const StatusAndDelay = ({ currentTrain, d, props, trainDescriptionSwitch }) => {
           paddingLeft: 1,
         }}
       >
-        {status}
+        {trainDelayStatus}
       </Text>
     </View>
   );
 };
-const Description = ({ train }) => {
+
-  return (
+const Description = ({ info }) => (
   <View
     style={{
       alignContent: "center",
@@ -519,9 +434,8 @@ const Description = ({ train }) => {
         }}
       >
         {" "}
-          &gt; {train.info}
+        &gt; {info}
       </Text>
     </View>
   </View>
 );
-};

components/駅名表/Sign.js

@@ -21,6 +21,7 @@ export default function Sign(props) {
     currentStation,
     originalStationList,
     oP,
+    oLP,
     favoriteStation,
     setFavoriteStation,
   } = props;
@@ -91,7 +92,7 @@ export default function Sign(props) {
   };
   const lottieRef = useRef();
   return (
-    <TouchableOpacity style={styleSheet.外枠} onPress={oP}>
+    <TouchableOpacity style={styleSheet.外枠} onPress={oP} onLongPress={oLP}>
       <StationNumberMaker currentStation={currentStation} />
       <StationNameArea currentStation={currentStation} />
       <TouchableOpacity
@@ -162,7 +163,6 @@ const LottieDelayView = ({
       ref={lottieRef}
       loop={loop}
       onAnimationFinish={(isCanceled) => {
-        console.log("finish");
         setProgressState(progress);
       }}
     />

howto.js

@@ -2,13 +2,13 @@ const WEBVIEW = "WEBVIEW";
 import React, { Component } from "react";
 import { StatusBar, View, TouchableOpacity, Text } from "react-native";
 import { WebView } from "react-native-webview";
-export default ({ navigation: { navigate } }) => (
+export default ({ navigation: { navigate }, route }) => {
+  const { info, onExit = () => navigate("Apps") } = route.params;
+
+  return (
     <View style={styles.View}>
-    <WebView
+      <WebView useWebKit source={{ uri: info }} />
-      useWebKit
+      <TouchableOpacity style={styles.touch} onPress={onExit}>
-      source={{ uri: "https://train.jr-shikoku.co.jp/usage.htm" }}
-    />
-    <TouchableOpacity style={styles.touch} onPress={() => navigate("Apps")}>
         <View style={{ flex: 1 }} />
         <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
           閉じる
@@ -17,6 +17,7 @@ export default ({ navigation: { navigate } }) => (
       </TouchableOpacity>
     </View>
   );
+};
 const styles = {
   View: { height: "100%", backgroundColor: "#0099CC" },
   touch: {

lib/HeaderConfig.js

@@ -0,0 +1,5 @@
+export const HeaderConfig = {
+  headers: {
+    referer: "https://train.jr-shikoku.co.jp/sp.html",
+  },
+};

lib/checkDuplicateTrainData.js

@@ -0,0 +1,6 @@
+export const checkDuplicateTrainData = (currentTrainArray) => {
+  const notNyujoData = currentTrainArray.filter((d) => d.delay !== "入線");
+  if (currentTrainArray.length == 1) return currentTrainArray[0];
+  if (notNyujoData.length == 0) return currentTrainArray[0];
+  else return notNyujoData[0];
+};

lib/getPdfViewURL.js

@@ -0,0 +1,7 @@
+import { Platform } from "react-native";
+
+export const getPDFViewURL = (url) => {
+  if (Platform.OS == "ios") return url;
+  else
+    return `https://docs.google.com/viewer?url=${encodeURI(url)}&embedded=true`;
+};

lib/getStationList.js

@@ -33,11 +33,6 @@ export const lineList = [
 export const getStationList = async (props) => {
   if (status) return status;
   //駅リストイニシャライズ
-  const HeaderConfig = {
-    headers: {
-      referer: "https://train.jr-shikoku.co.jp/sp.html",
-    },
-  };
   return await Promise.all([
     yosan,
     uwajima,

lib/getTrainDelayStatus.js

@@ -0,0 +1,18 @@
+export const getTrainDelayStatus = (current, Station_JP) => {
+  if (!current) return () => {};
+  const delay = current.delay;
+  switch (true) {
+    case delay === "入線":
+      if (current.Pos === Station_JP) {
+        return "当駅始発";
+      } else {
+        return "発車前";
+      }
+    case isNaN(delay):
+      return delay;
+    case delay === 0:
+      return "定刻通り";
+    default:
+      return delay + "分遅れ";
+  }
+};

lib/getTrainType.js

@@ -0,0 +1,14 @@
+export const getTrainType = (nameString) => {
+  switch (nameString) {
+    case "Rapid":
+      return { color: "aqua", name: "快速", data: "rapid" };
+    case "LTDEXP":
+      return { color: "red", name: "特急", data: "express" };
+    case "NightLTDEXP":
+      return { color: "red", name: "寝台特急", data: "express" };
+    case "Normal":
+      return { color: "white", name: "普通列車", data: "normal" };
+    default:
+      return { color: "white", name: "その他", data: "normal" };
+  }
+};

lib/parseAllTrainDiagram.js

@@ -0,0 +1,11 @@
+export const parseAllTrainDiagram = (text) => {
+  const val = text.replace("[\r\n", "").split(",\r\n");
+  let trainDiagram = {};
+  val.forEach((element) => {
+    try {
+      let data = JSON.parse(element);
+      Object.keys(data).forEach((key) => (trainDiagram[key] = data[key]));
+    } catch (e) {}
+  });
+  return trainDiagram;
+};

lib/webViewInjectjavascript.js

@@ -1,22 +1,29 @@
-export const injectJavascriptData = (mapSwitch, iconSetting, stationMenu) => {
+import { getJRF } from "../components/custom-train-data";
+
+export const injectJavascriptData = (
+  mapSwitch,
+  iconSetting,
+  stationMenu,
+  trainMenu
+) => {
+  // 一番上のメニュー非表示　地図スイッチによって切り替え
   const topMenu =
     mapSwitch != "true"
       ? `
-document.getElementById('header').querySelector('a').style.display = 'none';
+      document.querySelector('#header a').style.display = 'none';
-document.getElementById('header').style.height = '50px';
+      document.querySelector('#header').style.height = '50px';
-document.getElementById('main').style.paddingTop = '54px';
+      document.querySelector('#main').style.paddingTop = '54px';
-
+      document.querySelector('#headerStr').style.display = 'none';
-document.getElementById('headerStr').style.display = 'none';
       `
       : `
-document.getElementsByClassName('accordionClass')[0].style.display = 'none';
+      document.querySelector('.accordionClass').style.display = 'none';
-document.getElementById('header').style.display = 'none';
+      document.querySelector('#header').style.display = 'none';
-document.getElementById('main').style.paddingTop = '0px';
+      document.querySelector('#main').style.paddingTop = '0px';
-document.getElementById('headerStr').style.display = 'none';
+      document.querySelector('#headerStr').style.display = 'none';
       `;
-  const bootData =
+
-    topMenu +
+  // 何これ
-    `
+  const bootData = `
     const setReload = () =>{
       try{
         document.getElementById('refreshIcon').click();
@@ -28,17 +35,16 @@ const setReload = () =>{
     }
     setReload();
   `;
-
+  // 左か右かを判定してアイコンを設置する
   const trainIconMaker = `
-const setStationIcon = (行き先アイコン,img) =>{
+    const setStationIcon = (setIconElem,img) =>{
-  let newItem = document.createElement("div");
+      if(setIconElem.getAttribute("style").includes("left")){
-  if(行き先アイコン.getAttribute("style").includes("left")){
+        setIconElem.insertAdjacentHTML('beforebegin', "<img src="+img+" style='float:left;height:20px;'>");
-    行き先アイコン.insertAdjacentHTML('beforebegin', "<img src="+img+" style='float:left;height:20px;'>");
       }
       else{
-    行き先アイコン.insertAdjacentHTML('beforebegin', "<img src="+img+" style='float:right;height:20px;'>");
+        setIconElem.insertAdjacentHTML('beforebegin', "<img src="+img+" style='float:right;height:20px;'>");
       }
-  行き先アイコン.remove();
+      setIconElem.remove();
     }
   `;
 
@@ -66,14 +72,14 @@ case "17M":
     case "25M":
     case "27M":
     case "29M":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8000nr.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/s8000nr.png');
       break;
     //8000 アンパン
     case "10M":
     case "22M":
     case "9M":
     case "21M":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s8000ap.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/s8000ap.png');
       break;
 
 
@@ -86,7 +92,7 @@ case "7M":
     case "11M":
     case "19M":
     case "23M":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8600.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s8600.png');
       break;
 
     //いしづちメイン
@@ -109,7 +115,7 @@ case "1017M":
     case "1025M":
     case "1027M":
     case "1029M":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s8000nr.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/s8000nr.png');
       break;
 
     //8000 アンパン
@@ -117,7 +123,7 @@ case "1010M":
     case "1022M":
     case "1009M":
     case "1021M":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s8000ap.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/s8000ap.png');
       break;
 
     //8600
@@ -129,29 +135,29 @@ case "1007M":
     case "1011M":
     case "1019M":
     case "1023M":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8600_isz.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s8600_isz.png');
       break;
 
     //MEXP
     //8000
     case "1092M":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8000nr.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s8000nr.png');
       break;
     //8600
     case "1091M":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8600_isz.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s8600_isz.png');
       break;
     //三桁いしづち
     //8000 アンパン
     case "1041M":
     case "1044M":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s8000ap.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/s8000ap.png');
       break;
     //8600
     case "1043M":
     case "1042M":
     case "1046M":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8600_isz.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s8600_isz.png');
       break;
 
 
@@ -174,7 +180,7 @@ case "47D":
     case "51D":
     case "53D":
     case "55D":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2700.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s2700.png');
       break;
     //2700アンパン
     case "32D":
@@ -187,7 +193,7 @@ case "37D":
     case "45D":
     case "49D":
     case "57D":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s2700apr.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/s2700apr.png');
       break;
 
 
@@ -217,7 +223,7 @@ case "3025D":
     case "3027D":
     case "3031D":
     case "3033D":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2700_uzu.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s2700_uzu.png');
       break;
 
     //2600
@@ -229,13 +235,13 @@ case "3001D":
     case "3011D":
     case "3017D":
     case "3023D":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2600.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s2600.png');
       break;
 
     //キハ185
     case "3009D":
     case "3032D":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185tu_uzu.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s185tu_uzu.png');
       break;
       
     //マリンライナー
@@ -307,14 +313,14 @@ case "3165M":
     case "3167M":
     case "3169M":
     case "3175M":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s5001.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s5001.png');
       break;
     case "3102M":
     case "3101M":
     case "3103M":
     case "3171M":
     case "3173M":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s5001k.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s5001k.png');
       break;
 
     //サンライズ瀬戸
@@ -322,7 +328,7 @@ case "5032M":
     case "5031M":
     case "8041M": //琴平延長高松迄
     case "8031M": //琴平延長高松以降
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/w285.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/w285.png');
       break;
 
     //宇和海
@@ -351,7 +357,7 @@ case "1073D":
     case "1075D":
     case "1077D":
     case "1079D":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2000_uwa.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s2000_uwa.png');
     break;
     //2000 アンパン込み
     case "1054D":
@@ -362,7 +368,7 @@ case "1055D":
     case "1061D":
     case "1067D":
     case "1081D":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s2002a.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/s2002a.png');
     break;
     //しまんと
     case "2002D":
@@ -373,7 +379,7 @@ case "2001D":
     case "2003D":
     case "2005D":
     case "2007D":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2700_smn.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s2700_smn.png');
     break;
 
     //あしずり 2000
@@ -387,7 +393,7 @@ case "2075D":
     case "2077D":
     case "2081D":
     case "2083D":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2000_asi.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s2000_asi.png');
     break;
 
     //あしずり 2700
@@ -398,7 +404,7 @@ case "2073D":
     case "2079D":
     case "2085D":
     case "2072D":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2700_asi.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s2700_asi.png');
     break;
     //剣山
     case "4002D":
@@ -412,19 +418,19 @@ case "4005D":
     case "4007D":
     case "4009D":
     case "4011D":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185tu.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s185tu.png');
     break;
     //むろと
     case "5051D":
     case "5052D":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185_mrt.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s185_mrt.png');
     break;
 
 
     //よしのがわトロッコ
     case "8452D":
     case "8451D":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s185to_ai.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/s185to_ai.png');
     break;
 
     //岡山高松アントロ
@@ -433,7 +439,7 @@ case "8179D":
     //岡山琴平アントロ
     case "8277D":
     case "8278D":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s32to4.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/s32to4.png');
     break;
 
     //伊予灘ものがたり
@@ -441,14 +447,14 @@ case "8091D":
     case "8093D":
     case "8092D":
     case "8094D":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185iyoy.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s185iyoy.png');
     break;
 
 
     //千年ものがたり
     case "8011D":
     case "8012D":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185mm1.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s185mm1.png');
     break;
 
     //夜明けものがたり
@@ -456,7 +462,7 @@ case "8053D":
     case "8054D":
     case "8062D":
     case "8063D":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185ym1.png');
+      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s185ym1.png');
     break;
     default:
       break;
@@ -466,9 +472,7 @@ default:
 
   const JRF_icon =
     iconSetting == "true"
-      ? `
+      ? `JRF || setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/ef210a.png');`
-JRF || setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/ef210a.png');
-`
       : ``;
   const normal_train_name = `
     if(new RegExp(/^4[1-9]\\d\\d[DM]$/).test(列番データ) || new RegExp(/^5[1-7]\\d\\d[DM]$/).test(列番データ)){
@@ -494,99 +498,93 @@ else if(列番データ.indexOf("S") != -1){
   const JRF_name =
     `
 let JRF = false;
-switch(列番データ){
+const getJRF = num =>{
+  switch(num){
     case "71":
-    行き先情報.innerText = "東京(タ)→高松(タ)"+"\\n"+行き先情報.innerText;
+      return "東京(タ)→高松(タ)"+"\\n";
-    break;
     case "73":
     case "75":
-    行き先情報.innerText = "大阪(タ)→高松(タ)"+"\\n"+行き先情報.innerText;
+      return "大阪(タ)→高松(タ)"+"\\n";
-    break;
     case "3079":
-    行き先情報.innerText = "高松(タ)→伊予三島"+"\\n"+行き先情報.innerText;
+      return "高松(タ)→伊予三島"+"\\n";
-    break;
     case "3071":
     case "3077":
-    行き先情報.innerText = "高松(タ)→新居浜"+"\\n"+行き先情報.innerText;
+      return "高松(タ)→新居浜"+"\\n";
-    break;
     case "3073":
-    行き先情報.innerText = "高松(タ)→松山貨物"+"\\n"+行き先情報.innerText;
+      return "高松(タ)→松山貨物"+"\\n";
-    break;
     case "70":
-    行き先情報.innerText = "高松(タ)→東京(タ)"+"\\n"+行き先情報.innerText;
+      return "高松(タ)→東京(タ)"+"\\n";
-    break;
     case "74":
     case "76":
-    行き先情報.innerText = "高松(タ)→大阪(タ)"+"\\n"+行き先情報.innerText;
+      return "高松(タ)→大阪(タ)"+"\\n";
-    break;
     case "3078":
-    行き先情報.innerText = "伊予三島→高松(タ)"+"\\n"+行き先情報.innerText;
+      return "伊予三島→高松(タ)"+"\\n";
-    break;
     case "3070":
-    行き先情報.innerText = "新居浜→高松(タ)"+"\\n"+行き先情報.innerText;
+      return "新居浜→高松(タ)"+"\\n";
-    break;
     case "3076":
-    行き先情報.innerText = "新居浜→高松(タ)"+"\\n"+行き先情報.innerText;
+      return "新居浜→高松(タ)"+"\\n";
-    break;
     case "3072":
-    行き先情報.innerText = "松山貨物→高松(タ)"+"\\n"+行き先情報.innerText;
+      return "松山貨物→高松(タ)"+"\\n";
-    break;
     case "9070":
-    行き先情報.innerText = "臨時貨物"+"\\n"+行き先情報.innerText;
+      return "臨時貨物"+"\\n";
-    break;
     default:
       JRF = true;
+      return null;
   }
+}
+const data = getJRF(列番データ);
+行き先情報.innerText = data != null ?  data+行き先情報.innerText : 行き先情報.innerText;
+
 ` + JRF_icon;
 
   const TKT_name = `
   //安芸行と併結列車を個別に表示、それ以外をdefaultで下りなら既定の行き先を、上りなら奈半利行を設定
-  switch(列番データ){
+  const getTKT = num =>{
+    switch(num){
     case "5814D":
     case "5816D":
-      行き先情報.innerText = "ごめん・なはり線直通\\n快速 奈半利行";
+      return "ごめん・なはり線直通\\n快速 奈半利行";
-      break;
     case "5812D":
-      行き先情報.innerText = "ごめん・なはり線直通\\n快速 安芸行";
+      return "ごめん・なはり線直通\\n快速 安芸行";
-      break;
     case "5874D":
     case "5882D":
-      行き先情報.innerText = "ごめん・なはり線直通\\n各停 安芸行";
+      return "ごめん・なはり線直通\\n各停 安芸行";
-      break;
     case "742D":
     case "746D":
-      行き先情報.innerText = "土佐山田/奈半利行\\n(後免にて解結)\\nごめん・なはり線快速";
+      return "土佐山田/奈半利行\\n(後免にて解結)\\nごめん・なはり線快速";
-      break;
     default:
       if(new RegExp(/^58[1-3][1,3,5,7,9][DM]$/).test(列番データ)){
-        行き先情報.innerText = "ごめん・なはり線直通\\n快速 "+行き先情報.innerText;
+        return "ごめん・なはり線直通\\n快速 "+行き先情報.innerText;
       }
       else if(new RegExp(/^58[4-9][1,3,5,7,9][DM]$/).test(列番データ)){
-        行き先情報.innerText = "ごめん・なはり線直通\\n各停 "+行き先情報.innerText;
+        return "ごめん・なはり線直通\\n各停 "+行き先情報.innerText;
       }
-
       else if(new RegExp(/^58[3-4][0,2,4,6,8][DM]$/).test(列番データ)){
-        行き先情報.innerText = "ごめん・なはり線直通\\n快速 奈半利行";
+        return "ごめん・なはり線直通\\n快速 奈半利行";
       }
       else if(new RegExp(/^58[5-9][0,2,4,6,8][DM]$/).test(列番データ)){
-        行き先情報.innerText = "ごめん・なはり線直通\\n各停 奈半利行";
+        return "ごめん・なはり線直通\\n各停 奈半利行";
-      }
-      break;
       }
+  }}
+  行き先情報.innerText = getTKT(列番データ) || 行き先情報.innerText;
 
 `;
 
   const textInsert =
     `
+    //列番付与
 const setStrings = () =>{
   try {
-var elements = document.querySelectorAll('[onclick]');
+    const elements = document.querySelectorAll('#disp > div > div > div[onclick]');
     for (let element of elements) {
-  if(element.getAttribute('onclick').indexOf('ShowTrainTimeInfo') == -1) continue;
+      if(!element.getAttribute('offclick')){
+        element.setAttribute('offclick',element.getAttribute('onclick'))
+      }
       var 行き先情報 = element.getElementsByTagName("p")[0];
-  var 列番データ = element.getAttribute('onclick').split('"')[1];
+      var 列番データ = element.getAttribute('offclick').split('"')[1];
       var flag=false;
       var TrainType = undefined;
+      setTrainMenuDialog(element)
       if(行き先情報.innerText.includes(列番データ))continue; //回避
       ` +
     trainIcon +
@@ -668,22 +666,16 @@ document.querySelectorAll('#disp div')[0].style.width = '100vw';
       document.getElementById('disp').style.width = '100vw';
       document.getElementById('disp').style.overflowX = 'hidden';
 
-
-  
     }catch(e){
       alert("にゃーん");
     }
   } catch (e) {}
-//setTimeout(setStrings,500);
 }
-const target = document.getElementById('disp'); // body要素を監視
+
-const observer = new MutationObserver( (mutations) => {
+const textInsert = new MutationObserver( (mutations) => setStrings());
-// observer.disconnect(); // 監視を終了
-setStrings();
-});
 
 // 監視を開始
-observer.observe(target, {
+textInsert.observe(document.getElementById('disp'), {
   attributes: true, // 属性変化の監視
   //attributeOldValue: true, // 変化前の属性値を matation.oldValue に格納する
   //characterData: true, // テキストノードの変化を監視
@@ -695,9 +687,8 @@ observer.observe(target, {
 
   const makeTrainView = `
 
-const modal_content = document.getElementById('modal_content'); // body要素を監視
+const makeTrainView = new MutationObserver( (mutations) => {
-const modal_observer = new MutationObserver( (mutations) => {
+
-// observer.disconnect(); // 監視を終了
   for(let d of modal_content.getElementsByTagName("button") ){
     const data = d.onclick.toString().split("\\"")[1];
     d.onclick = () => window.ReactNativeWebView.postMessage(data)
@@ -705,7 +696,7 @@ for(let d of modal_content.getElementsByTagName("button") ){
 });
 
 // 監視を開始
-modal_observer.observe(modal_content, {
+makeTrainView.observe(document.getElementById('modal_content'), {
   //attributes: true, // 属性変化の監視
   //attributeOldValue: true, // 変化前の属性値を matation.oldValue に格納する
   //characterData: true, // テキストノードの変化を監視
@@ -714,13 +705,33 @@ modal_observer.observe(modal_content, {
   //subtree: true // 子孫ノードも監視対象に含める
 });
 `;
+  const makeTrainMenu =
+    trainMenu == "true"
+      ? `
+      // これの中身抽出ShowTrainTimeInfo("1228M","normal")
+      function setTrainMenuDialog(d){
+        try{
+          const offclick = d.getAttribute('offclick');
+          if(!offclick) return;
+          const s =  offclick.replace('ShowTrainTimeInfo(','').replaceAll('"','').replace(')','').split(',') ;
+          const returnData = {type:"ShowTrainTimeInfo",trainNum:s[0],limited:s[1]};
+          d.onclick = ()=>window.ReactNativeWebView.postMessage(JSON.stringify(returnData));
+        }catch(e){
+        }
+        
+      }
+        function ShowTrainTimeInfo(trainNum,limited){
+          window.ReactNativeWebView.postMessage(JSON.stringify({type:"ShowTrainTimeInfo",trainNum,limited}));
+        };
+      `
+      : `function setTrainMenuDialog(d){}`;
+
   const makeStationMenu =
     stationMenu == "true"
       ? `
-const setStationMenuDialog = () =>{
+      //駅メニューダイアログの配置
-  document.querySelector('#pMENU_2').style.display='none';
+
-document.querySelector('#pMENU_3').style.display='none';
+const setStationMenuDialog = new MutationObserver( (mutations) => {
-document.querySelector('#pMENU_2').style.display='none';
   const data =[];
   document.querySelectorAll('#disp div div').forEach(d=>d.id.indexOf("st")!= -1 && data.push(d));
 
@@ -729,19 +740,15 @@ for(let d of data ){
       d.offclick = d.onclick.toString();
     }
     d.onclick = () =>{ 
-      window.ReactNativeWebView.postMessage(d.offclick);
+      const s = d.offclick.replace('(event)','').replaceAll("'", "").split('(')[1].split(')')[0].split(',');
+      // これの中身抽出 PopUpMenu(event,'2','端岡','http://www.jr-shikoku.co.jp/01_trainbus/jikoku/pdf/hashioka.pdf','https://www.google.co.jp/maps/place/34.305027,133.967643','','1')
+      window.ReactNativeWebView.postMessage(JSON.stringify({type:"PopUpMenu",event:s[0],id:s[1],name:s[2],pdf:s[3],map:s[4],url:s[5],chk:s[6]}));
     }
   }
-}
-
-
-const observer3 = new MutationObserver( (mutations) => {
-// observer3.disconnect(); // 監視を終了
-setStationMenuDialog();
 });
 
 // 監視を開始
-observer3.observe(target, {
+setStationMenuDialog.observe(document.querySelector('#disp'), {
   attributes: true, // 属性変化の監視
   //attributeOldValue: true, // 変化前の属性値を matation.oldValue に格納する
   //characterData: true, // テキストノードの変化を監視
@@ -752,6 +759,12 @@ observer3.observe(target, {
 `
       : ``;
   return (
-    bootData + makeTrainView + trainIconMaker + textInsert + makeStationMenu
+    bootData +
+    topMenu +
+    makeTrainView +
+    trainIconMaker +
+    makeTrainMenu +
+    textInsert +
+    makeStationMenu
   );
 };

menu.js

@@ -25,6 +25,8 @@ import {
 } from "@expo/vector-icons";
 import LottieView from "lottie-react-native";
 import { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView";
+import { parseAllTrainDiagram } from "./lib/parseAllTrainDiagram";
+import trainList from "./assets/originData/trainList";
 
 import LED_vision from "./components/発車時刻表/LED_vidion";
 import Sign from "./components/駅名表/Sign";
@@ -34,7 +36,9 @@ import { TicketBox } from "./components/atom/TicketBox";
 import { TextBox } from "./components/atom/TextBox";
 import { getStationList, lineList } from "./lib/getStationList";
 import { JRSTraInfo } from "./components/ActionSheetComponents/JRSTraInfo";
+import { EachTrainInfo } from "./components/ActionSheetComponents/EachTrainInfo";
 import useInterval from "./lib/useInterval";
+import { HeaderConfig } from "./lib/HeaderConfig";
 
 export default function Menu(props) {
   const {
@@ -42,6 +46,9 @@ export default function Menu(props) {
     favoriteStation,
     setFavoriteStation,
     busAndTrainData,
+    currentTrainState,
+    currentTrainLoadingState,
+    getCurrentTrain,
   } = props;
   const JRSTraInfoEXAcSR = useRef(null);
   const StationBoardAcSR = useRef(null);
@@ -55,6 +62,14 @@ export default function Menu(props) {
     });
   }, []);
 
+  //列車情報表示関連
+  const EachTrainInfoAsSR = useRef(null);
+  const [trainInfo, setTrainInfo] = useState({
+    trainNum: undefined,
+    limited: undefined,
+    trainData: undefined,
+  });
+
   const getCurrentPosition = () => {
     if (locationStatus !== "granted") return () => {};
     Location.getCurrentPositionAsync({}).then((location) =>
@@ -124,13 +139,11 @@ export default function Menu(props) {
   const allStationData = [currentStation, ...favoriteStation].filter(
     (d) => d != undefined
   );
-  console.log(allStationData);
   useEffect(() => {
     if (allStationData.length == 0) {
       setSelectedCurrentStation(0);
       return;
     }
-    console.log(allStationData[selectedCurrentStation]);
     if (allStationData[selectedCurrentStation] == undefined) {
       const count = selectedCurrentStation - 1;
       setSelectedCurrentStation(count);
@@ -138,12 +151,54 @@ export default function Menu(props) {
   }, [selectedCurrentStation, currentStation, favoriteStation]);
   useEffect(() => {
     if (!carouselRef.current) return;
-    console.log(carouselRef.current);
     if (carouselRef.current?._itemToSnapTo != selectedCurrentStation) {
       carouselRef.current.snapToItem(0);
       carouselRef.current.snapToItem(selectedCurrentStation);
     }
   }, [selectedCurrentStation]);
+
+  //全列車ダイヤリストを作成するuseEffect
+  const [trainDiagram, setTrainDiagram] = useState(null); // 全列車のダイヤを列番ベースで整理
+  useEffect(() => {
+    //全列車リストを生成する副作用[無条件初回実行]
+    fetch(
+      "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=traintimeinfo&arg3=dia",
+      HeaderConfig
+    )
+      .then((response) => response.text())
+      .then((d) => {
+        if (d.indexOf("<title>404 Not Found</title>") != -1) throw Error;
+        setTrainDiagram(parseAllTrainDiagram(d));
+      })
+      .catch((d) => {
+        console.log("fallback");
+        setTrainDiagram(trainList);
+      });
+  }, []);
+
+  const openStationACFromEachTrainInfo = (stationName) => {
+    // EachTrainInfoAsSR.current?.hide();
+    // const findStationEachLine = (selectLine) => {
+    //   let NearStation = selectLine.filter((d) => d.Station_JP == stationName);
+    //   return NearStation;
+    // };
+    // let returnDataBase = lineList
+    //   .map((d) => findStationEachLine(originalStationList[d]))
+    //   .filter((d) => d.length > 0)
+    //   .reduce((pre, current) => {
+    //     pre.push(...current);
+    //     return pre;
+    //   }, []);
+    // if (returnDataBase.length) {
+    //   setStationBoardData(returnDataBase);
+    //   sleep(30, function () {
+    //     StationBoardAcSR.current?.show();
+    //   });
+    // } else {
+    //   setStationBoardData(undefined);
+    //   StationBoardAcSR.current?.hide();
+    // }
+  };
   return (
     <View
       style={{
@@ -194,7 +249,12 @@ export default function Menu(props) {
               station={
                 originalStationList && allStationData[selectedCurrentStation][0]
               }
-              navigate={navigate}
+              setTrainInfo={setTrainInfo}
+              EachTrainInfoAsSR={EachTrainInfoAsSR}
+              trainDiagram={trainDiagram}
+              currentTrainState={currentTrainState}
+              currentTrainLoadingState={currentTrainLoadingState}
+              getCurrentTrain={getCurrentTrain}
             />
           )}
         <JRSTraInfoBox
@@ -218,6 +278,11 @@ export default function Menu(props) {
         favoriteStation={favoriteStation}
         setFavoriteStation={setFavoriteStation}
         busAndTrainData={busAndTrainData}
+        navigate={navigate}
+        onExit={() => {
+          StationBoardAcSR.current?.setModalVisible();
+          navigate("menu");
+        }}
       />
       <JRSTraInfo
         JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}
@@ -226,6 +291,14 @@ export default function Menu(props) {
         setLoadingDelayData={setLoadingDelayData}
         delayData={delayData}
       />
+      <EachTrainInfo
+        setRef={EachTrainInfoAsSR}
+        data={trainInfo}
+        navigate={navigate}
+        originalStationList={originalStationList}
+        openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
+        from="LED"
+      />
     </View>
   );
 }
@@ -585,14 +658,7 @@ const FixedContentBottom = (props) => {
             borderBottomRightRadius: 10,
           }}
         >
-          {((data) =>
+          {[
-            data.map((d) => (
-              <ListItem onPress={() => Linking.openURL(d.url)}>
-                <Text>{d.name}</Text>
-                <View style={{ flex: 1 }} />
-                <Icon name="chevron-right" size={20} />
-              </ListItem>
-            )))([
             {
               url: "https://twitter.com/JRshikoku_eigyo",
               name: "JR四国営業部【公式】",
@@ -641,7 +707,13 @@ const FixedContentBottom = (props) => {
               url: "https://twitter.com/Yoakemonogatari",
               name: "志国土佐　時代の夜明けのものがたり【公式】",
             },
-          ])}
+          ].map((d) => (
+            <ListItem onPress={() => Linking.openURL(d.url)}>
+              <Text>{d.name}</Text>
+              <View style={{ flex: 1 }} />
+              <Icon name="chevron-right" size={20} />
+            </ListItem>
+          ))}
         </View>
       </View>
       <Text style={{ fontWeight: "bold", fontSize: 20 }}>