Merge commit 'f3f9ee60c2d89616cdb1c555eb415779fdd3295e' into special/royal-develop

App.js

@@ -3,6 +3,7 @@ import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { Platform, UIManager } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { UpdateAsync } from "./UpdateAsync.js";
 import { AS } from "./storageControl";
 import TNDView from "./ndView";
@@ -45,26 +46,28 @@ export default function App() {
   useEffect(() => UpdateAsync(), []);
   return (
     <SafeAreaProvider>
-      <FavoriteStationProvider>
+      <GestureHandlerRootView style={{ flex: 1 }}>
-        <TrainDelayDataProvider>
+        <FavoriteStationProvider>
-          <CurrentTrainProvider>
+          <TrainDelayDataProvider>
-            <AreaInfoProvider>
+            <CurrentTrainProvider>
-              <AllTrainDiagramProvider>
+              <AreaInfoProvider>
-                <BusAndTrainDataProvider>
+                <AllTrainDiagramProvider>
-                  <SheetProvider>
+                  <BusAndTrainDataProvider>
-                    <AppContainer />
+                    <SheetProvider>
-                  </SheetProvider>
+                      <AppContainer />
-                </BusAndTrainDataProvider>
+                    </SheetProvider>
-              </AllTrainDiagramProvider>
+                  </BusAndTrainDataProvider>
-            </AreaInfoProvider>
+                </AllTrainDiagramProvider>
-          </CurrentTrainProvider>
+              </AreaInfoProvider>
-        </TrainDelayDataProvider>
+            </CurrentTrainProvider>
-      </FavoriteStationProvider>
+          </TrainDelayDataProvider>
+        </FavoriteStationProvider>
+      </GestureHandlerRootView>
     </SafeAreaProvider>
   );
 }
 export function AppContainer() {
-  const { setBusAndTrainData } = useBusAndTrainData();
+  const { setBusAndTrainData, setTrainPairData } = useBusAndTrainData();
   useEffect(() => {
     AS.getItem("busAndTrain")
       .then((d) => {
@@ -82,6 +85,23 @@ export function AppContainer() {
           });
       });
   }, []);
+  useEffect(() => {
+    AS.getItem("trainPairData")
+      .then((d) => {
+        const returnData = JSON.parse(d);
+        setTrainPairData(returnData);
+      })
+      .catch(() => {
+        fetch(
+          "https://script.google.com/macros/s/AKfycbyoBH7_rBwzPmhU1ghRBNTAVuvGltIrZtWxE07gDdhGGlDL9Ip2qk3pFM5u2xtRBl8/exec"
+        )
+          .then((d) => d.json())
+          .then((d) => {
+            setTrainPairData(d);
+            AS.setItem("trainPairData", JSON.stringify(d));
+          });
+      });
+  }, []);
 
   const { areaInfo, setAreaInfo } = useAreaInfo();
   const getAreaData = () =>

Apps.js

@@ -1,8 +1,16 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
-import { View, Platform, Text, TouchableOpacity } from "react-native";
+import {
+  View,
+  Platform,
+  Text,
+  TouchableOpacity,
+  useWindowDimensions,
+  LayoutAnimation,
+} from "react-native";
 import { WebView } from "react-native-webview";
 import Constants from "expo-constants";
 import { Ionicons } from "@expo/vector-icons";
+
 import { AS } from "./storageControl";
 import { news } from "./config/newsUpdate";
 import { getStationList, lineList } from "./lib/getStationList";
@@ -11,15 +19,28 @@ import { checkDuplicateTrainData } from "./lib/checkDuplicateTrainData";
 import { useFavoriteStation } from "./stateBox/useFavoriteStation";
 import { useCurrentTrain } from "./stateBox/useCurrentTrain";
 import { SheetManager } from "react-native-actions-sheet";
+import TrainMenu from "./components/trainMenu";
+import { EachTrainInfoCore } from "./components/ActionSheetComponents/EachTrainInfoCore";
 /* 
 import StatusbarDetect from './StatusbarDetect';
 var Status = StatusbarDetect(); */
 
 export default function Apps({ navigation, webview, stationData }) {
   const { currentTrain } = useCurrentTrain();
+  const { height, width } = useWindowDimensions();
   const { navigate } = navigation;
   var urlcache = "";
   const { favoriteStation } = useFavoriteStation();
+  const [isLandscape, setIsLandscape] = useState(false); //画面が横向きかどうか
+  const handleLayout = () => {};
+  useEffect(() => {
+    if (height / width > 1.5) {
+      setIsLandscape(false);
+    }
+    if (height / width < 1.5) {
+      setIsLandscape(true);
+    }
+  }, [height, width]);
 
   //画面表示関連
   const [iconSetting, setIconSetting] = useState(undefined);
@@ -167,6 +188,7 @@ export default function Apps({ navigation, webview, stationData }) {
       case "ShowTrainTimeInfo": {
         const { trainNum, limited } = dataSet;
         //alert(trainNum, limited);
+        LayoutAnimation.easeInEaseOut();
         setTrainInfo({
           trainNum,
           limited,
@@ -174,6 +196,7 @@ export default function Apps({ navigation, webview, stationData }) {
             currentTrain.filter((a) => a.num == trainNum)
           ),
         }); //遅延情報は未実装
+        if (isLandscape) return;
         const payload = {
           data: {
             trainNum,
@@ -271,8 +294,22 @@ export default function Apps({ navigation, webview, stationData }) {
       style={{
         height: "100%",
         paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
+        flexDirection: isLandscape ? "row" : "column",
       }}
+      onLayout={handleLayout}
     >
+      {!trainInfo.trainNum && isLandscape ? (
+        <TrainMenu
+          webview={webview}
+          stationData={stationData}
+          navigation={{ navigate: null }}
+          style={{
+            width: (width / 100) * 40,
+            height: "100%",
+            flexDirection: "column-reverse",
+          }}
+        />
+      ) : null}
       {/* {Status} */}
       <WebView
         useWebKit
@@ -310,14 +347,50 @@ export default function Apps({ navigation, webview, stationData }) {
           }
         }}
       />
-      <MapsButton
+      {isLandscape && trainInfo.trainNum && (
-        onPress={() => navigate("trainMenu", { webview })}
+        <View
-        top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
+          style={{
-        mapSwitch={mapSwitch == "true" ? "flex" : "none"}
+            width: (width / 100) * 40,
-      />
+            height: height,
+            flexDirection: "column",
+          }}
+        >
+          <EachTrainInfoCore
+            {...{
+              data: trainInfo.trainNum ? trainInfo : undefined,
+              navigate,
+              originalStationList,
+              openStationACFromEachTrainInfo,
+              from: "Train",
+              setTrainInfo,
+            }}
+          />
+        </View>
+      )}
+      {isLandscape || (
+        <MapsButton
+          onPress={() => navigate("trainMenu", { webview })}
+          top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
+          mapSwitch={mapSwitch == "true" ? "flex" : "none"}
+        />
+      )}
+      {isLandscape && trainInfo.trainNum && (
+        <LandscapeBackButton
+          onPress={() => {
+            LayoutAnimation.easeInEaseOut();
+            setTrainInfo({
+              trainNum: undefined,
+              limited: undefined,
+              trainData: undefined,
+            });
+          }}
+          top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
+        />
+      )}
       <ReloadButton
         onPress={() => webview.current.reload()}
         top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
+        right={isLandscape && trainInfo.trainNum ? (width / 100) * 40 : 0}
         LoadError={LoadError}
       />
     </View>
@@ -360,12 +433,54 @@ const MapsButton = ({ onPress, top, mapSwitch }) => {
   );
 };
 
-const ReloadButton = ({ onPress, top, mapSwitch, LoadError = false }) => {
+const LandscapeBackButton = ({ onPress, top }) => {
   const styles = {
     touch: {
       position: "absolute",
       top,
-      right: 10,
+      left: 10,
+      width: 50,
+      height: 50,
+      backgroundColor: "#0099CC",
+      borderColor: "white",
+      borderStyle: "solid",
+      borderWidth: 1,
+      borderRadius: 50,
+      alignContent: "center",
+      alignSelf: "center",
+      alignItems: "center",
+      display: "flex",
+    },
+    text: {
+      textAlign: "center",
+      width: "auto",
+      height: "auto",
+      textAlignVertical: "center",
+      fontWeight: "bold",
+      color: "white",
+    },
+  };
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.touch}>
+      <View style={{ flex: 1 }} />
+      <Ionicons name="arrow-back" color="white" size={30} />
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};
+
+const ReloadButton = ({
+  onPress,
+  top,
+  mapSwitch,
+  LoadError = false,
+  right,
+}) => {
+  const styles = {
+    touch: {
+      position: "absolute",
+      top,
+      right: 10 + right,
       width: 50,
       height: 50,
       backgroundColor: LoadError ? "red" : "#0099CC",

app.json

@@ -8,7 +8,7 @@
       "android"
     ],
     "version": "4.6",
-    "orientation": "portrait",
+    "orientation": "default",
     "icon": "./assets/icon.png",
     "splash": {
       "image": "./assets/splash.png",

assets/originData/trainList.js

@@ -1053,5 +1053,14 @@
 "9253M":"児島,発,11:02#多度津,発,11:30#善通寺,発,11:54#琴平,着,12:00#",
 "9256M":"琴平,発,15:20#善通寺,発,15:26#多度津,発,15:35#宇多津,発,15:44#児島,着,16:04#",
 "9057M":"高松,発,18:27#坂出,発,18:41#宇多津,発,18:46#丸亀,発,18:49#多度津,着,18:55#",
-"9054M":"宇多津,発,9:00#坂出,発,9:07#高松,着,9:21#"
+"9054M":"宇多津,発,9:00#坂出,発,9:07#高松,着,9:21#",
+//9001: "岡山,発,10:11#児島,発,11:05#坂出,発,11:41#高松,着,12:00#独自補完データ,提,https://x.com/makkun3/status/1750490886293848372#",
+9001: "ウェルカムセレモニー,頃,9:40#岡山,頃,10:10#琴平,頃,14:00#琴平観光,以降,14:00#湯山荘 阿讃琴南,頃,16:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第1章\n－瀬戸の海に想いを馳せながら－\n岡山・高松・琴平,提,https://www.the-royalexpress.jp/plan/2614/#",
+//9029: "高松,発,12:42#琴平,着,13:57#独自補完データ,提,https://x.com/makkun3/status/1750490886293848372#",
+9029: "ウェルカムセレモニー,頃,9:40#岡山,頃,10:10#琴平,頃,14:00#琴平観光,以降,14:00#湯山荘 阿讃琴南,頃,16:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第1章\n－瀬戸の海に想いを馳せながら－\n岡山・高松・琴平,提,https://www.the-royalexpress.jp/plan/2614/#",
+//9003: "多度津,発,10:09#今治,発,13:20#伊予亀岡,発,13:55#菊間,発,14:04#松山,着,14:50#独自補完データ,提,https://x.com/makkun3/status/1750490886293848372#",
+9003: "湯山荘 阿讃琴南,頃,9:00#多度津,頃,10:10#松山,頃,14:50#宿泊施設,以降,14:50#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第2章\n －四国の伝統文化を感じて－\n多度津・坂出・松山,提,https://www.the-royalexpress.jp/plan/2614/#",
+9055: "宿泊施設→バス,着,10:30#松山,頃,10:30#今治,頃,14:15#しまなみエリア観光,以降,14:15#Azumi Setoda,頃,16:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第3章\n－凪の誘い・瀬戸内の絶景－\n今治・しまなみ海道,提,https://www.the-royalexpress.jp/plan/2614/#",
+9056: "宿泊施設→バス,着,10:30#松山,頃,10:30#今治,頃,14:15#しまなみエリア観光,以降,14:15#Azumi Setoda,頃,16:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第3章\n－凪の誘い・瀬戸内の絶景－\n今治・しまなみ海道,提,https://www.the-royalexpress.jp/plan/2614/#",
+9004: "Azumi Setoda,頃,9:30#今治,頃,10:30#高松,頃,14:30#高松港\n↓\n瀬戸内クルーズ（貸切）\n「おりんぴあどりーむ せと」\n↓ \n 新岡山港,以降,14:15#岡山駅,頃,18:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS フィナーレ\n－四国・瀬戸内の彩りに囲まれて－\n今治・高松・岡山,提,https://www.the-royalexpress.jp/plan/2614/#",
 }

components/ActionSheetComponents/EachTrainInfo.js

@@ -1,802 +1,23 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useRef } from "react";
-import {
+import { Platform } from "react-native";
-  View,
+import ActionSheet from "react-native-actions-sheet";
-  LayoutAnimation,
+import { EachTrainInfoCore } from "./EachTrainInfoCore";
-  ScrollView,
-  Linking,
-  Text,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  TouchableHighlight,
-  Platform,
-} from "react-native";
-import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import ActionSheet, {
-  SheetManager,
-  useScrollHandlers,
-} from "react-native-actions-sheet";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-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";
-import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
-import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
-
 export const EachTrainInfo = (props) => {
   if (!props.payload) return <></>;
-  const {
-    data,
-    navigate,
-    originalStationList,
-    openStationACFromEachTrainInfo = () => {},
-    from,
-  } = props.payload;
-  const [trainData, setTrainData] = useState([]);
-  const [isTop, setIsTop] = useState(true);
-  const [currentPosition, setCurrentPosition] = useState([]);
 
-  const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
-
-  const { currentTrain } = useCurrentTrain();
-
-  const [currentTrainData, setCurrentTrainData] = useState([]);
-
-  useEffect(() => {
-    setCurrentTrainData(
-      checkDuplicateTrainData(
-        currentTrain.filter((d) => d.num == data.trainNum)
-      )
-    );
-  }, [currentTrain]);
-
-  useEffect(() => {
-    //列車現在地アイコン表示スイッチ
-    AS.getItem("trainPositionSwitch")
-      .then((d) => {
-        if (d) {
-          setTrainPositionSwitch(d);
-        } else {
-        }
-      })
-      .catch((d) => AS.setItem("trainPositionSwitch", "false"));
-  }, []);
-  const insets = useSafeAreaInsets();
-  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(() => {
-    //currentTrainData.Pos = "鴨川～端岡"; //test
-    if (!currentTrainData?.Pos) return;
-    if (currentTrainData?.Pos.match("～")) {
-      const pos = currentTrainData?.Pos.replace("（下り）", "")
-        .replace("（上り）", "")
-        .split("～");
-      setCurrentPosition([getStationData(pos[0]), getStationData(pos[1])]);
-    } else {
-      setCurrentPosition([getStationData(currentTrainData?.Pos)]);
-    }
-  }, [currentTrainData]);
-
-  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) {
-    try {
-      // arrayは現在位置の駅ID(駅在宅の場合は1つの配列、駅間の場合は2つの配列)
-      // stopStationIDListは停車駅の駅IDの配列
-      if (!stopStationIDList.length) return [];
-      // arrayが二次元配列だったら早期リターン
-      if (!array instanceof Array) return [];
-      if (!array.length) return [];
-      if (array[0] instanceof Array) 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 [];
-      }
-    } catch (e) {
-      console.log(e);
-    }
-  }
-  // 使用例
-  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("ライナーライナー", "ライナー");
-  };
   const actionSheetRef = useRef(null);
-  const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
   return (
     <ActionSheet
-      gestureEnabled={isTop}
+      gestureEnabled={true}
+      //gestureEnabled={!actionSheetHorizonalScroll}
       CustomHeaderComponent={<></>}
       ref={actionSheetRef}
       drawUnderStatusBar={false}
       isModal={Platform.OS == "ios"}
-      containerStyle={
+
-        Platform.OS == "android"
+      //useBottomSafeAreaPadding={Platform.OS == "android"}
-          ? {
-              paddingBottom: insets.bottom,
-            }
-          : {}
-      }
-      useBottomSafeAreaPadding={Platform.OS == "android"}
     >
-      <View
+      <EachTrainInfoCore {...{ actionSheetRef, ...props.payload }} />
-        style={{
-          backgroundColor: "#0099CC",
-          borderTopRadius: 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,
-                  });
-                  SheetManager.hide("EachTrainInfo");
-                }}
-              />
-            )}
-        </View>
-        {from == "AllTrainDiagramView" || (
-          <ScrollView
-            style={{
-              flexDirection: "row",
-              //width: widthPercentageToDP("200%"),
-              minHeight: 200,
-              height: heightPercentageToDP("20%"),
-            }}
-            horizontal
-            pagingEnabled
-          >
-            <View
-              style={{
-                flexDirection: "row",
-                minHeight: 200,
-                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 }} />
-                {currentTrainData?.Pos && currentTrainData?.Pos.match("～") ? (
-                  <>
-                    <Text
-                      style={{
-                        fontSize: 28,
-                        color: "#0099CC",
-                        textAlign: "right",
-                      }}
-                    >
-                      {
-                        currentTrainData?.Pos.replace("（下り）", "")
-                          .replace("（上り）", "")
-                          .split("～")[0]
-                      }
-                    </Text>
-                    <Text style={{ color: "#0099CC", textAlign: "right" }}>
-                      ～
-                    </Text>
-                    <Text
-                      style={{
-                        fontSize: 28,
-                        color: "#0099CC",
-                        textAlign: "right",
-                      }}
-                    >
-                      {
-                        currentTrainData?.Pos.replace("（下り）", "")
-                          .replace("（上り）", "")
-                          .split("～")[1]
-                      }
-                    </Text>
-                  </>
-                ) : (
-                  <Text
-                    style={{
-                      fontSize: 28,
-                      color: "#0099CC",
-                      textAlign: "right",
-                    }}
-                  >
-                    {currentTrainData?.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(currentTrainData?.delay) ? "状態" : "遅延時分"}
-                  </Text>
-                  <View style={{ flex: 1 }} />
-                  <Text
-                    style={{
-                      fontSize: 32,
-                      color: "#0099CC",
-                      textAlign: "right",
-                    }}
-                  >
-                    {currentTrainData?.delay}
-                    {isNaN(currentTrainData?.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",
-                    }}
-                  >
-                    {currentTrainData?.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>
-        )}
-        <View
-          style={{
-            alignItems: "center",
-            backgroundColor: "white",
-            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(currentTrainData?.delay) &&
-                currentTrainData?.delay != 0 && (
-                  <Text
-                    style={{
-                      fontSize: 15,
-                      color: "black",
-                      position: "absolute",
-                      right: 110,
-                      textAlign: "right",
-                      textDecorationLine: "line-through",
-                    }}
-                  >
-                    (定刻)
-                  </Text>
-                )}
-              <Text
-                style={{
-                  fontSize: 20,
-                  color: isNaN(currentTrainData?.delay)
-                    ? "black"
-                    : currentTrainData?.delay == 0
-                    ? "black"
-                    : "red",
-                  width: 60,
-                }}
-              >
-                見込
-              </Text>
-              <Text style={{ fontSize: 20, width: 50 }}></Text>
-            </View>
-          </View>
-        </View>
-        <ScrollView
-          {...scrollHandlers}
-          style={{
-            maxHeight: heightPercentageToDP(
-              from == "AllTrainDiagramView" ? "70%" : "50%"
-            ),
-          }}
-          onScroll={(e) => {
-            if (!Platform.OS !== "android") return;
-            setIsTop(e.nativeEvent.contentOffset.y < 0);
-          }}
-        >
-          <View style={{ backgroundColor: "white", alignItems: "center" }}>
-            {/* <LottieView
-                autoPlay
-                loop
-                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
-                source={require("../../assets/51690-loading-diamonds.json")}
-              />
-              <Text>ほげほげふがふが</Text> */}
-
-            {trainData.map((i, index) => {
-              const [station, se, time] = i.split(",");
-              if(se == "提"){
-                return (
-                  <TouchableWithoutFeedback
-                    onPress={() => Linking.openURL(time)}
-                    key={station}
-                  >
-                    <View style={{ flexDirection: "row" }}>
-                      <View
-                        style={{
-                          padding: 8,
-                          flexDirection: "row",
-                          borderBottomWidth: 1,
-                          borderBottomColor: "#f0f0f0",
-                          flex: 1,
-                        }}
-                      >
-                        <Text style={{ fontSize: 20 }}>{station}</Text>
-                        <View style={{ flex: 1 }} />
-                        <Text style={{ fontSize: 18 }}>
-                          提供元<MaterialCommunityIcons name={"open-in-new"} color="black" size={20} />
-                        </Text>
-                        
-                      </View>
-                    </View>
-                  </TouchableWithoutFeedback>
-                );
-              }
-              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(currentTrainData?.delay)) {
-                date.setMinutes(date.getMinutes() + currentTrainData?.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 && points.findIndex((d) => d == index) >= 0 ? (
-                        <Text
-                          style={{
-                            fontSize: 20,
-                            marginRight: 70,
-                          }}
-                        >
-                          🚊
-                        </Text>
-                      ) : null}
-                      {!isNaN(currentTrainData?.delay) &&
-                        currentTrainData?.delay != 0 && (
-                          <Text
-                            style={{
-                              fontSize: 15,
-                              color: "black",
-                              width: 60,
-                              position: "absolute",
-                              right: 120,
-                              textAlign: "right",
-                              textDecorationLine: "line-through",
-                            }}
-                          >
-                            {time}
-                          </Text>
-                        )}
-                      <Text
-                        style={{
-                          fontSize: 20,
-                          color: isNaN(currentTrainData?.delay)
-                            ? "black"
-                            : currentTrainData?.delay == 0
-                            ? "black"
-                            : "red",
-                          width: 60,
-                        }}
-                      >
-                        {timeString[0]}:{timeString[1]}
-                      </Text>
-                      <Text style={{ fontSize: 18, width: 50 }}>
-                        {se?.replace("発", "出発").replace("着", "到着")}
-                      </Text>
-                    </View>
-                  </View>
-                </TouchableWithoutFeedback>
-              );
-            })}
-
-            <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>
-            </View>
-          </View>
-        </ScrollView>
-      </View>
     </ActionSheet>
   );
 };

components/ActionSheetComponents/EachTrainInfo/DataFromButton.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { View, Text, TouchableWithoutFeedback } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { Linking } from "react-native";
+export const DataFromButton = ({ i }) => {
+  const [station, se, time] = i.split(",");
+  return (
+    <TouchableWithoutFeedback
+      onPress={() => Linking.openURL(time)}
+      key={station}
+    >
+      <View style={{ flexDirection: "row" }}>
+        <View
+          style={{
+            padding: 8,
+            flexDirection: "row",
+            borderBottomWidth: 1,
+            borderBottomColor: "#f0f0f0",
+            flex: 1,
+          }}
+        >
+          <Text style={{ fontSize: 20 }}>{station}</Text>
+          <View style={{ flex: 1 }} />
+          <Text style={{ fontSize: 18 }}>
+            提供元
+            <MaterialCommunityIcons
+              name={"open-in-new"}
+              color="black"
+              size={20}
+            />
+          </Text>
+        </View>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};

components/ActionSheetComponents/EachTrainInfo/EachStopList.js

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

components/ActionSheetComponents/EachTrainInfo/LandscapeTrainInfo.js

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

components/ActionSheetComponents/EachTrainInfo/LongHeader.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { ScrollView } from "react-native";
+import { TrainDataView } from "./TrainDataView";
+
+export const LongHeader = ({
+  currentTrainData,
+  currentPosition,
+  nearTrainIDList,
+  openTrainInfo,
+}) => {
+  return (
+    <ScrollView
+      //onTouchStart={() => setActionSheetHorizonalScroll(true)}
+      //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
+      //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
+      style={{
+        flexDirection: "row",
+        //width: widthPercentageToDP("200%"),
+        // minHeight: 200,
+        //height: heightPercentageToDP("20%"),
+      }}
+      horizontal
+      pagingEnabled
+    >
+      <TrainDataView
+        currentTrainData={currentTrainData}
+        currentPosition={currentPosition}
+        nearTrainIDList={nearTrainIDList}
+        openTrainInfo={openTrainInfo}
+      />
+    </ScrollView>
+  );
+};

components/ActionSheetComponents/EachTrainInfo/ScrollStickyContent.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+export const ScrollStickyContent = ({ currentTrainData }) => {
+  return (
+    <View
+      style={{
+        alignItems: "center",
+        backgroundColor: "white",
+        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(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
+            <Text
+              style={{
+                fontSize: 15,
+                color: "black",
+                position: "absolute",
+                right: 110,
+                textAlign: "right",
+                textDecorationLine: "line-through",
+              }}
+            >
+              (定刻)
+            </Text>
+          )}
+          <Text
+            style={{
+              fontSize: 20,
+              color: isNaN(currentTrainData?.delay)
+                ? "black"
+                : currentTrainData?.delay == 0
+                ? "black"
+                : "red",
+              width: 60,
+            }}
+          >
+            見込
+          </Text>
+          <Text style={{ fontSize: 20, width: 50 }}></Text>
+        </View>
+      </View>
+    </View>
+  );
+};

components/ActionSheetComponents/EachTrainInfo/ShortHeader.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { ScrollView } from "react-native";
+import { TrainDataView } from "./TrainDataView";
+
+export const ShortHeader = ({
+  currentTrainData,
+  currentPosition,
+  nearTrainIDList,
+  openTrainInfo,
+}) => {
+  return (
+    <ScrollView
+      //onTouchStart={() => setActionSheetHorizonalScroll(true)}
+      //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
+      //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
+      style={{
+        flexDirection: "row",
+        flex: 1,
+        //width: widthPercentageToDP("200%"),
+        // minHeight: 200,
+        //height: heightPercentageToDP("20%"),
+      }}
+      horizontal
+      pagingEnabled
+    >
+      <TrainDataView
+        mode={2}
+        currentTrainData={currentTrainData}
+        currentPosition={currentPosition}
+        nearTrainIDList={nearTrainIDList}
+        openTrainInfo={openTrainInfo}
+      />
+    </ScrollView>
+  );
+};

components/ActionSheetComponents/EachTrainInfo/StateBox.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+export const StateBox = ({ text, title, style, mode }) => (
+  <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
+    <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
+    <View style={{ flex: 1 }} />
+    <View
+      style={{
+        color: "#0099CC",
+        textAlign: "right",
+        flexDirection: mode == 2 ? "row" : "column",
+      }}
+    >
+      {text?.match("～") ? (
+        <>
+          <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
+            {text.split("～")[0]}
+          </Text>
+          <Text style={{ color: "#0099CC", textAlign: "right" }}>～</Text>
+          <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
+            {text.split("～")[1]}
+          </Text>
+        </>
+      ) : (
+        <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
+      )}
+    </View>
+  </View>
+);
+const boxStyle = {
+  flex: 1,
+  backgroundColor: "white",
+  borderRadius: 10,
+  padding: 10,
+  margin: 10,
+};
+const boxStyle2 = {
+  flex: 1,
+  backgroundColor: "white",
+  borderRadius: 10,
+  padding: 5,
+  margin: 5,
+};
+const boxTextStyle2 = {
+  fontSize: 18,
+  color: "#0099CC",
+  textAlign: "right",
+};
+
+const boxTextStyle = {
+  fontSize: 25,
+  color: "#0099CC",
+  textAlign: "right",
+};

components/ActionSheetComponents/EachTrainInfo/TrainDataView.js

@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  useWindowDimensions,
+} from "react-native";
+import { StateBox } from "./StateBox";
+import {
+  heightPercentageToDP,
+  widthPercentageToDP,
+} from "react-native-responsive-screen";
+
+export const TrainDataView = ({
+  currentTrainData,
+  currentPosition,
+  nearTrainIDList,
+  openTrainInfo,
+  mode = 0,
+}) => {
+  const [isLandscape, setIsLandscape] = useState(false);
+  const { width, height } = useWindowDimensions();
+  useEffect(() => {
+    if (height / width > 1.5) {
+      setIsLandscape(false);
+    }
+    if (height / width < 1.5) {
+      setIsLandscape(true);
+    }
+  }, [width, height]);
+
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        //minHeight: 200,
+        //height: heightPercentageToDP("20%"),
+        width: isLandscape ? (width / 100) * 40 : width,
+        flex: 1,
+      }}
+    >
+      <StateBox
+        mode={mode}
+        title={`現在地 ${currentPosition.toString()}`}
+        text={
+          currentTrainData?.Pos.match("～")
+            ? `${
+                currentTrainData?.Pos.replace("（下り）", "")
+                  .replace("（上り）", "")
+                  .split("～")[0]
+              }～${
+                currentTrainData?.Pos.replace("（下り）", "")
+                  .replace("（上り）", "")
+                  .split("～")[1]
+              }`
+            : currentTrainData?.Pos
+        }
+      />
+      <View style={{ flex: 1, flexDirection: mode == 2 ? "row" : "column" }}>
+        <View style={{ flex: 1, flexDirection: "row" }}>
+          <StateBox
+            mode={mode}
+            title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
+            text={`${currentTrainData?.delay}${
+              isNaN(currentTrainData?.delay) ? "" : "分"
+            }`}
+          />
+        </View>
+        <TouchableOpacity
+          style={{ flex: 1, flexDirection: "row" }}
+          disabled={nearTrainIDList.length == 0}
+          onPress={() => {
+            if (nearTrainIDList.length == 0) return;
+            openTrainInfo(nearTrainIDList[0]);
+          }}
+        >
+          {nearTrainIDList.length == 0 ? (
+            <StateBox mode={mode} title="列番" text={currentTrainData?.num} />
+          ) : (
+            <StateBox
+              mode={mode}
+              title="増解結相手を表示▶️"
+              text={`${nearTrainIDList}`}
+              style={{
+                borderWidth: 1,
+                borderColor: "red",
+                borderStyle: "solid",
+              }}
+            />
+          )}
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};

components/ActionSheetComponents/EachTrainInfoCore.js

@@ -0,0 +1,453 @@
+import React, { useEffect, useState, useRef } from "react";
+import {
+  View,
+  LayoutAnimation,
+  Text,
+  TouchableOpacity,
+  Platform,
+  StyleSheet,
+  useWindowDimensions,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import ActionSheet, {
+  SheetManager,
+  useScrollHandlers,
+} from "react-native-actions-sheet";
+import { AS } from "../../storageControl";
+import trainList from "../../assets/originData/trainList";
+import { lineList } from "../../lib/getStationList";
+import { heightPercentageToDP } from "react-native-responsive-screen";
+import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
+import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
+import { getTrainType } from "../../lib/getTrainType";
+import { customTrainDataDetector } from "../custom-train-data";
+import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
+import { EachStopList } from "./EachTrainInfo/EachStopList";
+import { DataFromButton } from "./EachTrainInfo/DataFromButton";
+import { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
+import { LongHeader } from "./EachTrainInfo/LongHeader";
+import { ShortHeader } from "./EachTrainInfo/ShortHeader";
+import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent";
+import { LandscapeTrainInfo } from "./EachTrainInfo/LandscapeTrainInfo";
+import { getStationData } from "../../lib/eachTrainInfoCoreLib/getStationData";
+import { findReversalPoints } from "../../lib/eachTrainInfoCoreLib/findReversalPoints";
+import { migrateTrainName } from "../../lib/eachTrainInfoCoreLib/migrateTrainName";
+import { getType } from "../../lib/eachTrainInfoCoreLib/getType";
+import { searchSpecialTrain } from "../../lib/eachTrainInfoCoreLib/searchSpecialTrain";
+import { openBackTrainInfo } from "../../lib/eachTrainInfoCoreLib/openBackTrainInfo";
+
+export const EachTrainInfoCore = ({
+  actionSheetRef,
+  data,
+  navigate,
+  originalStationList,
+  openStationACFromEachTrainInfo,
+  from,
+  setTrainInfo,
+}) => {
+  // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
+
+  const { currentTrain } = useCurrentTrain();
+  const [currentTrainData, setCurrentTrainData] = useState();
+
+  // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
+
+  useEffect(() => {
+    console.log(currentTrain.length);
+    if (!currentTrain.length) return;
+    setCurrentTrainData(
+      checkDuplicateTrainData(
+        currentTrain.filter((d) => d.num == data.trainNum)
+      )
+    );
+  }, [currentTrain, data.trainNum]);
+
+  //bconst insets = useSafeAreaInsets();
+
+  const [headStation, setHeadStation] = useState();
+  const [tailStation, setTailStation] = useState();
+  const [isConcatNear, setIsConcatNear] = useState(false);
+  const [showNearTrain, setShowNearTrain] = useState([]);
+  const [nearTrainIDList, setNearTrainIDList] = useState([]);
+  const { getInfluencedTrainData } = useBusAndTrainData();
+  const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
+  const [currentPosition, setCurrentPosition] = useState([]);
+  const [trainData, setTrainData] = useState([]);
+  const scrollHandlers = actionSheetRef
+    ? useScrollHandlers("scrollview-1", actionSheetRef)
+    : null;
+
+  const stationList =
+    originalStationList &&
+    lineList.map((d) =>
+      originalStationList[d].map((a) => ({
+        StationNumber: a.StationNumber,
+        StationName: a.Station_JP,
+      }))
+    );
+
+  // 使用例
+  const points =
+    trainPositionSwitch == "true"
+      ? findReversalPoints(currentPosition, stopStationIDList)
+      : [];
+  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];
+  });
+
+  const { height, width } = useWindowDimensions();
+  const [isLandscape, setIsLandscape] = useState(false);
+
+  const [trueTrainID, setTrueTrainID] = useState();
+  useEffect(() => {
+    if (!data.trainNum) return;
+    const TD = trainList[data.trainNum];
+    setIsConcatNear(false);
+    setHeadStation();
+    setTailStation();
+    if (!TD) {
+      const specialTrainActualID = searchSpecialTrain(data.trainNum, trainList);
+      setTrueTrainID(specialTrainActualID || undefined);
+      setTrainData([]);
+      return;
+    }
+    setTrainData(TD.split("#").filter((d) => d != ""));
+  }, [data]);
+  //裏列車探索
+  useEffect(() => {
+    if (!data.trainNum) return;
+    const [returnArray, TDArray] = getInfluencedTrainData(data.trainNum);
+    setNearTrainIDList(returnArray);
+    setShowNearTrain(TDArray);
+    if (trainData.length == 0) return;
+    if (TDArray.length == 0) return;
+    let head;
+    let tail;
+    TDArray.forEach((d) => {
+      const [station, se, time] = d.split(",");
+
+      if (station == trainData[0].split(",")[0]) {
+        head = trainData[0].split(",")[0];
+      }
+      if (station == trainData[trainData.length - 1].split(",")[0]) {
+        tail = trainData[trainData.length - 1].split(",")[0];
+      }
+    });
+    if (head) setHeadStation(head);
+    else setHeadStation();
+    if (tail) setTailStation(tail);
+    else setTailStation();
+  }, [trainData, data]);
+
+  useEffect(() => {
+    //currentTrainData.Pos = "鴨川～端岡"; //test
+    if (!currentTrainData) return;
+    if (!currentTrainData?.Pos) return;
+    if (currentTrainData?.Pos.match("～")) {
+      const pos = currentTrainData?.Pos.replace("（下り）", "")
+        .replace("（上り）", "")
+        .split("～");
+      setCurrentPosition([
+        getStationData(pos[0], stationList),
+        getStationData(pos[1], stationList),
+      ]);
+    } else {
+      setCurrentPosition([getStationData(currentTrainData?.Pos, stationList)]);
+    }
+  }, [currentTrainData]);
+
+  useEffect(() => {
+    if (height / width > 1.5) {
+      setIsLandscape(false);
+    }
+    if (height / width < 1.5) {
+      setIsLandscape(true);
+    }
+  }, [width, height]);
+
+  const replaceSpecialTrainDetail = (trainNum) => {
+    let TD = trainList[trainNum];
+    if (!TD) return;
+    setTrainData(TD.split("#").filter((d) => d != ""));
+  };
+
+  useEffect(() => {
+    //列車現在地アイコン表示スイッチ
+    AS.getItem("trainPositionSwitch")
+      .then((d) => {
+        if (d) setTrainPositionSwitch(d);
+      })
+      .catch((d) => AS.setItem("trainPositionSwitch", "false"));
+  }, []);
+
+  const openTrainInfo = (d) => {
+    const train = customTrainDataDetector(d);
+    let TrainNumber = "";
+    if (train.trainNumDistance != undefined) {
+      const timeInfo =
+        parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance;
+      TrainNumber = timeInfo + "号";
+    }
+    const payload = {
+      data: {
+        trainNum: d,
+        limited: `${getTrainType(train.type).data}:${
+          train.trainName
+        }${TrainNumber}`,
+      },
+      navigate,
+      originalStationList,
+      from: "AllTrainDiagramView",
+    };
+    if (setTrainInfo) {
+      setTrainInfo(payload.data);
+    } else {
+      SheetManager.hide("EachTrainInfo").then(() => {
+        //0.1秒待機してから開く
+        setTimeout(() => {
+          SheetManager.show("EachTrainInfo", { payload });
+        }, 1);
+      });
+    }
+  };
+  return (
+    <View
+      style={{
+        backgroundColor: "#0099CC",
+        borderTopRadius: 5,
+        borderColor: "dark",
+        borderWidth: 1,
+      }}
+    >
+      {isLandscape || (
+        <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}
+          {isConcatNear ? ` + ${nearTrainIDList}` : ""}
+        </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,
+                });
+                SheetManager.hide("EachTrainInfo");
+              }}
+            />
+          )}
+      </View>
+      <DynamicHeaderScrollView
+        styles={styles}
+        scrollViewProps={scrollHandlers}
+        containerProps={{
+          style: {
+            maxHeight: isLandscape ? height - 94 : (height / 100) * 70,
+          },
+        }}
+        Max_Header_Height={from == "AllTrainDiagramView" ? 0 : 200}
+        Min_Header_Height={from == "AllTrainDiagramView" ? 0 : 80}
+        shortHeader={
+          from == "AllTrainDiagramView" ? (
+            <></>
+          ) : (
+            <ShortHeader
+              currentTrainData={currentTrainData}
+              currentPosition={currentPosition}
+              nearTrainIDList={nearTrainIDList}
+              openTrainInfo={openTrainInfo}
+            />
+          )
+        }
+        longHeader={
+          from == "AllTrainDiagramView" ? (
+            <></>
+          ) : (
+            <LongHeader
+              currentTrainData={currentTrainData}
+              currentPosition={currentPosition}
+              nearTrainIDList={nearTrainIDList}
+              openTrainInfo={openTrainInfo}
+            />
+          )
+        }
+        topStickyContent={
+          <ScrollStickyContent currentTrainData={currentTrainData} />
+        }
+      >
+        {headStation && !isConcatNear && (
+          <TouchableOpacity
+            onPress={() => {
+              const array = openBackTrainInfo(
+                headStation,
+                trainData,
+                showNearTrain
+              );
+              if (!array) return;
+              setTrainData(array);
+              setIsConcatNear(true);
+            }}
+            style={{
+              padding: 10,
+              flexDirection: "row",
+              borderColor: "blue",
+              borderWidth: 1,
+              margin: 10,
+              borderRadius: 5,
+              alignItems: "center",
+            }}
+          >
+            <Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
+              「本当の始発駅」を表示
+            </Text>
+          </TouchableOpacity>
+        )}
+        {/* <LottieView
+                autoPlay
+                loop
+                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+                source={require("../../assets/51690-loading-diamonds.json")}
+              />
+              <Text>ほげほげふがふが</Text> */}
+        {trainData.length == 0 && trueTrainID && (
+          <TouchableOpacity
+            onPress={() => replaceSpecialTrainDetail(trueTrainID)}
+            style={{
+              padding: 10,
+              flexDirection: "row",
+              borderColor: "blue",
+              borderWidth: 1,
+              margin: 10,
+              borderRadius: 5,
+              alignItems: "center",
+            }}
+          >
+            <Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
+              本来の列車情報を表示
+            </Text>
+          </TouchableOpacity>
+        )}
+        {trainData.map((i, index) =>
+          i.split(",")[1] == "提" ? (
+            <DataFromButton i={i} />
+          ) : (
+            <EachStopList
+              i={i}
+              index={index}
+              stationList={stationList}
+              points={points}
+              currentTrainData={currentTrainData}
+              openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
+            />
+          )
+        )}
+        {tailStation && !isConcatNear && (
+          <TouchableOpacity
+            onPress={() => {
+              const array = openBackTrainInfo(
+                tailStation,
+                trainData,
+                showNearTrain
+              );
+
+              if (!array) return;
+              setTrainData(array);
+              setIsConcatNear(true);
+            }}
+            style={{
+              padding: 10,
+              flexDirection: "row",
+              borderColor: "blue",
+              borderWidth: 1,
+              margin: 10,
+              borderRadius: 5,
+              alignItems: "center",
+            }}
+          >
+            <Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
+              「本当の終着駅」を表示
+            </Text>
+          </TouchableOpacity>
+        )}
+
+        <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>
+        </View>
+      </DynamicHeaderScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    justifyContent: "center",
+    alignItems: "center",
+    left: 0,
+    right: 0,
+    //paddingTop: 10,
+    position: "absolute",
+    zIndex: 1,
+    backgroundColor: "f0f0f0",
+  },
+  headerText: {
+    color: "#fff",
+    fontSize: 25,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+});

components/ActionSheetComponents/JRSTraInfo.js

@@ -12,6 +12,8 @@ import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import ActionSheet, { useScrollHandlers } from "react-native-actions-sheet";
 import LottieView from "lottie-react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import ViewShot from "react-native-view-shot";
+import * as Sharing from "expo-sharing";
 import { useTrainDelayData } from "../../stateBox/useTrainDelayData";
 export const JRSTraInfo = () => {
   const { getTime, delayData, loadingDelayData, setLoadingDelayData } =
@@ -19,6 +21,20 @@ export const JRSTraInfo = () => {
   const actionSheetRef = useRef(null);
   const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
   const insets = useSafeAreaInsets();
+  const viewShot = useRef(null);
+
+  const onCapture = async () => {
+    const url = await viewShot.current.capture();
+
+    const ok = await Sharing.isAvailableAsync();
+    if (ok) {
+      await Sharing.shareAsync(
+        "file://" + url,
+        (options = { mimeType: "image/jpeg", dialogTitle: "Share this image" })
+      );
+    }
+  };
+
   return (
     <ActionSheet
       gestureEnabled
@@ -42,87 +58,107 @@ export const JRSTraInfo = () => {
           borderWidth: 1,
         }}
       >
-        <View style={{ height: 26, width: "100%" }}>
+        <ViewShot ref={viewShot} options={{ format: "jpg" }}>
           <View
-            style={{
+            style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}
-              height: 6,
+          >
-              width: 45,
+            <View
-              borderRadius: 100,
+              style={{
-              backgroundColor: "#f0f0f0",
+                height: 6,
-              marginVertical: 10,
+                width: 45,
-              alignSelf: "center",
+                borderRadius: 100,
-            }}
+                backgroundColor: "#f0f0f0",
-          />
+                marginVertical: 10,
-        </View>
+                alignSelf: "center",
-        <View
+              }}
-          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
+            />
-        >
+          </View>
-          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-            列車遅延速報EX
-          </Text>
-          <View style={{ flex: 1 }} />
-          {/* <TouchableOpacity style={{padding:10,backgroundColor:"white",alignContent:"center"}} onPress={() => {doFetch()}}>
-                      <Text style={{fontSize:20,fontWeight:"bold",color:"#0099CC"}}>最新の情報へ更新</Text>
-                    </TouchableOpacity> */}
-          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-            {getTime
-              ? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
-                ":" +
-                getTime.toLocaleTimeString("ja-JP").split(":")[1]
-              : NaN}{" "}
-          </Text>
-          <Ionicons
-            name="reload"
-            color="white"
-            size={30}
-            style={{ margin: 5 }}
-            onPress={() => {
-              LayoutAnimation.easeInEaseOut(), setLoadingDelayData(true);
-            }}
-          />
-        </View>
-        <ScrollView {...scrollHandlers}>
           <View
             style={{
               padding: 10,
-              backgroundColor: "white",
+              flexDirection: "row",
+              alignItems: "center",
+              backgroundColor: "#0099CC",
             }}
           >
-            {loadingDelayData ? (
+            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-              <View style={{ alignItems: "center" }}>
+              列車遅延速報EX
-                <LottieView
+            </Text>
-                  autoPlay
+            <View style={{ flex: 1 }} />
-                  loop
+            {/* <TouchableOpacity style={{padding:10,backgroundColor:"white",alignContent:"center"}} onPress={() => {doFetch()}}>
-                  style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+                      <Text style={{fontSize:20,fontWeight:"bold",color:"#0099CC"}}>最新の情報へ更新</Text>
-                  source={require("../../assets/51690-loading-diamonds.json")}
+                    </TouchableOpacity> */}
-                />
+            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-              </View>
+              {getTime
-            ) : delayData ? (
+                ? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
-              delayData.map((d) => {
+                  ":" +
-                let data = d.split(" ");
+                  getTime.toLocaleTimeString("ja-JP").split(":")[1]
-                return (
+                : NaN}{" "}
-                  <View style={{ flexDirection: "row" }} key={data[1]}>
+            </Text>
-                    <Text style={{ flex: 15, fontSize: 20 }}>
+            <Ionicons
-                      {data[0].replace("\n", "")}
+              name="reload"
-                    </Text>
+              color="white"
-                    <Text style={{ flex: 5, fontSize: 20 }}>{data[1]}</Text>
+              size={30}
-                    <Text style={{ flex: 6, fontSize: 20 }}>{data[3]}</Text>
+              style={{ margin: 5 }}
-                  </View>
+              onPress={() => {
-                );
+                LayoutAnimation.easeInEaseOut(), setLoadingDelayData(true);
-              })
+              }}
-            ) : (
+            />
-              <Text>現在、5分以上の遅れはありません。</Text>
-            )}
           </View>
+          <ScrollView {...scrollHandlers}>
+            <View
+              style={{
+                padding: 10,
+                backgroundColor: "white",
+              }}
+            >
+              {loadingDelayData ? (
+                <View style={{ alignItems: "center" }}>
+                  <LottieView
+                    autoPlay
+                    loop
+                    style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+                    source={require("../../assets/51690-loading-diamonds.json")}
+                  />
+                </View>
+              ) : delayData ? (
+                delayData.map((d) => {
+                  let data = d.split(" ");
+                  return (
+                    <View style={{ flexDirection: "row" }} key={data[1]}>
+                      <Text style={{ flex: 15, fontSize: 20 }}>
+                        {data[0].replace("\n", "")}
+                      </Text>
+                      <Text style={{ flex: 5, fontSize: 20 }}>{data[1]}</Text>
+                      <Text style={{ flex: 6, fontSize: 20 }}>{data[3]}</Text>
+                    </View>
+                  );
+                })
+              ) : (
+                <Text>現在、5分以上の遅れはありません。</Text>
+              )}
+            </View>
 
-          <View style={{ padding: 10 }}>
+            <View style={{ padding: 10, backgroundColor: "#0099CC" }}>
-            <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+              <Text
-              列車遅延情報EXについて
+                style={{ fontSize: 20, fontWeight: "bold", color: "white" }}
-            </Text>
+              >
-            <Text style={{ color: "white" }}>
+                列車遅延情報EXについて
-              列車遅延情報をJR四国公式列車運行情報より5分毎に取得します。Twitterにて投稿している内容と同一のものとなります。
+              </Text>
-            </Text>
+              <Text style={{ color: "white" }}>
-          </View>
+                列車遅延情報をJR四国公式列車運行情報より5分毎に取得します。Twitterにて投稿している内容と同一のものとなります。
+              </Text>
+            </View>
+          </ScrollView>
+        </ViewShot>
+        <View
+          style={{
+            padding: 10,
+            backgroundColor: "#0099CC",
+            flexDirection: "row",
+            justifyContent: "space-between",
+          }}
+        >
           <TouchableOpacity
             style={{
               padding: 10,
@@ -132,6 +168,8 @@ export const JRSTraInfo = () => {
               margin: 10,
               borderRadius: 5,
               alignItems: "center",
+              backgroundColor: "#0099CC",
+              flex: 1,
             }}
             onPress={() =>
               Linking.openURL("https://mstdn.y-zu.org/@JRSTraInfoEX")
@@ -140,14 +178,30 @@ export const JRSTraInfo = () => {
             <MaterialCommunityIcons name="mastodon" color="white" size={30} />
             <View style={{ flex: 1 }} />
             <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-              MastodonBOTはこちら！
+              MastodonBOT
             </Text>
             <View style={{ flex: 1 }} />
-            <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-              →
-            </Text>
           </TouchableOpacity>
-        </ScrollView>
+          <TouchableOpacity
+            style={{
+              padding: 10,
+              flexDirection: "row",
+              borderColor: "white",
+              borderWidth: 1,
+              margin: 10,
+              borderRadius: 5,
+              alignItems: "center",
+              backgroundColor: "#0099CC",
+            }}
+            onPress={onCapture}
+          >
+            <MaterialCommunityIcons
+              name="share-variant"
+              color="white"
+              size={30}
+            />
+          </TouchableOpacity>
+        </View>
       </View>
     </ActionSheet>
   );

components/DynamicHeaderScrollView.js

@@ -0,0 +1,106 @@
+import { ScrollView, View, Animated, Platform } from "react-native";
+import React, { useRef } from "react";
+
+export const DynamicHeaderScrollView = (props) => {
+  const {
+    Max_Header_Height = 200,
+    Min_Header_Height = 80,
+    children,
+    scrollViewProps = {},
+    containerProps = {},
+    shortHeader = <></>,
+    longHeader = <></>,
+    topStickyContent,
+    styles,
+  } = props;
+  const scrollOffsetY = useRef(new Animated.Value(0)).current;
+
+  const Scroll_Distance = Max_Header_Height - Min_Header_Height;
+
+  const animatedHeaderHeight = scrollOffsetY.interpolate({
+    inputRange: [Scroll_Distance, Scroll_Distance + 30],
+    outputRange: [Max_Header_Height, 0],
+    extrapolate: "clamp",
+  });
+  const animatedHeaderHeight2 = scrollOffsetY.interpolate({
+    inputRange: [Scroll_Distance, Scroll_Distance + 30],
+    outputRange: [Max_Header_Height, Min_Header_Height],
+    extrapolate: "clamp",
+  });
+  const animatedHeaderVisible = scrollOffsetY.interpolate({
+    inputRange: [Scroll_Distance - 30, Scroll_Distance],
+    outputRange: [1, 0],
+    extrapolate: "clamp",
+  });
+  const animatedHeaderVisible2 = scrollOffsetY.interpolate({
+    inputRange: [Scroll_Distance - 30, Scroll_Distance + 30],
+    outputRange: [0, 1],
+    extrapolate: "clamp",
+  });
+  return (
+    <View {...containerProps}>
+      <View style={{ zIndex: 1 }}>
+        <Animated.View
+          style={[
+            styles.header,
+            {
+              height: animatedHeaderHeight2,
+              backgroundColor: "#0099CC",
+              margin: 0,
+              top: 0,
+              opacity: animatedHeaderVisible2,
+            },
+          ]}
+        >
+          {shortHeader}
+        </Animated.View>
+        <Animated.View
+          style={[
+            styles.header,
+            {
+              height: animatedHeaderHeight,
+              backgroundColor: "#0099CC",
+              opacity: animatedHeaderVisible,
+
+              top: 0,
+            },
+          ]}
+        >
+          {longHeader}
+        </Animated.View>
+      </View>
+      <ScrollView
+        {...scrollViewProps}
+        style={{
+          backgroundColor: "white",
+          zIndex: 0,
+        }}
+        stickyHeaderIndices={[1]}
+        scrollEventThrottle={16}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
+          { useNativeDriver: false }
+        )}
+      >
+        <View
+          style={{
+            height: Scroll_Distance,
+            flexDirection: "column",
+          }}
+        />
+        {topStickyContent && (
+          <View
+            style={{
+              paddingTop: Min_Header_Height,
+              flexDirection: "column",
+            }}
+            index={1}
+          >
+            {topStickyContent}
+          </View>
+        )}
+        {children}
+      </ScrollView>
+    </View>
+  );
+};

components/custom-train-data.js

@@ -608,6 +608,43 @@ export const customTrainDataDetector = (TrainNumber) => {
         info: "",
       };
 
+    /////ロイヤルエクスプレス
+    case "9001":
+    case "9029":
+      return {
+        type: "SPCL",
+        trainName: "THE ROYAL EXPRESS",
+        trainIcon: "http://trainfrontview.net/p/izq2100rex1.png",
+        trainNumDistance: null,
+        info: "[団体専用] 第1章　－瀬戸の海に想いを馳せながら－　岡山・高松・琴平",
+      };
+    /////ロイヤルエクスプレス
+    case "9003":
+      return {
+        type: "SPCL",
+        trainName: "THE ROYAL EXPRESS",
+        trainIcon: "http://trainfrontview.net/p/izq2100rex1.png",
+        trainNumDistance: null,
+        info: "[団体専用] 第2章　－四国の伝統文化を感じて－　多度津・坂出・松山",
+      };
+      /////ロイヤルエクスプレス
+      case "9055":
+      case "9056":
+        return {
+          type: "SPCL",
+          trainName: "THE ROYAL EXPRESS",
+          trainIcon: "http://trainfrontview.net/p/izq2100rex1.png",
+          trainNumDistance: null,
+          info: "[団体専用] 第3章　－凪の誘い・瀬戸内の絶景－　今治・しまなみ海道",
+        };
+      case "9004":
+        return {
+          type: "SPCL",
+          trainName: "THE ROYAL EXPRESS",
+          trainIcon: "http://trainfrontview.net/p/izq2100rex1.png",
+          trainNumDistance: null,
+          info: "[団体専用] フィナーレ －四国・瀬戸内の彩りに囲まれて－ 今治・高松・岡山",
+        };
     default:
       return {
         type: "Normal",

components/trainMenu.js

@@ -6,10 +6,11 @@ export default function TrainMenu({
   navigation: { navigate },
   webview,
   stationData,
+  style,
 }) {
   const mapRef = useRef();
   return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+    <View style={{ height: "100%", backgroundColor: "#0099CC", ...style }}>
       <MapView
         style={{ flex: 1, width: "100%", height: "100%" }}
         showsUserLocation={true}
@@ -46,65 +47,69 @@ export default function TrainMenu({
                     webview.current?.injectJavaScript(
                       `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}')`
                     );
-                    navigate("Apps");
+                    if (navigate) navigate("Apps");
                   }}
                 ></Marker>
               );
             })
           )}
       </MapView>
-      <View style={{ flexDirection: "row" }}>
+      {navigate && (
-        <UsefulBox
+        <View style={{ flexDirection: "row" }}>
-          backgroundColor={"#F89038"}
+          <UsefulBox
-          icon="train-car"
+            backgroundColor={"#F89038"}
-          flex={1}
+            icon="train-car"
-          onPressButton={() =>
+            flex={1}
-            navigate("howto", {
+            onPressButton={() =>
-              info: "https://train.jr-shikoku.co.jp/usage.htm",
+              navigate("howto", {
-            })
+                info: "https://train.jr-shikoku.co.jp/usage.htm",
-          }
+              })
+            }
+          >
+            使い方
+          </UsefulBox>
+          <UsefulBox
+            backgroundColor={"#EA4752"}
+            icon="star"
+            flex={1}
+            onPressButton={() => navigate("favoriteList")}
+          >
+            お気に入り
+          </UsefulBox>
+          <UsefulBox
+            backgroundColor={"#91C31F"}
+            icon="clipboard-list-outline"
+            flex={1}
+            onPressButton={() =>
+              Linking.openURL(
+                "https://nexcloud.haruk.in/apps/forms/ZRHjWFF7znr5Xjr2"
+              )
+            }
+          >
+            フィードバック
+          </UsefulBox>
+        </View>
+      )}
+      {navigate && (
+        <TouchableOpacity
+          style={{
+            padding: 10,
+            flexDirection: "row",
+            borderColor: "white",
+            borderWidth: 1,
+            margin: 10,
+            borderRadius: 5,
+            alignItems: "center",
+          }}
+          onPress={() => navigate("Apps")}
         >
-          使い方
+          <View style={{ flex: 1 }} />
-        </UsefulBox>
+          <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-        <UsefulBox
+            閉じる
-          backgroundColor={"#EA4752"}
+          </Text>
-          icon="star"
+          <View style={{ flex: 1 }} />
-          flex={1}
+        </TouchableOpacity>
-          onPressButton={() => navigate("favoriteList")}
+      )}
-        >
-          お気に入り
-        </UsefulBox>
-        <UsefulBox
-          backgroundColor={"#91C31F"}
-          icon="clipboard-list-outline"
-          flex={1}
-          onPressButton={() =>
-            Linking.openURL(
-              "https://nexcloud.haruk.in/apps/forms/ZRHjWFF7znr5Xjr2"
-            )
-          }
-        >
-          この機能のフィードバック
-        </UsefulBox>
-      </View>
-      <TouchableOpacity
-        style={{
-          padding: 10,
-          flexDirection: "row",
-          borderColor: "white",
-          borderWidth: 1,
-          margin: 10,
-          borderRadius: 5,
-          alignItems: "center",
-        }}
-        onPress={() => navigate("Apps")}
-      >
-        <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-          閉じる
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
     </View>
   );
 }
@@ -115,14 +120,14 @@ const UsefulBox = (props) => {
       style={{
         flex: flex,
         backgroundColor: backgroundColor,
-        padding: 10,
+        padding: 5,
         alignItems: "center",
         margin: 2,
       }}
       onPress={onPressButton}
     >
       <MaterialCommunityIcons name={icon} color="white" size={50} />
-      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
+      <Text style={{ color: "white", fontWeight: "bold", fontSize: 16 }}>
         {children}
       </Text>
     </TouchableOpacity>

eas.json

@@ -29,6 +29,12 @@
     },
     "production4.6": {
       "channel": "costoco"
+    },
+    "beta5.0": {
+      "channel": "dshopping"
+    },
+    "production5.0": {
+      "channel": "dmm"
     }
   },
   "submit": {

lib/eachTrainInfoCoreLib/findReversalPoints.js

@@ -0,0 +1,113 @@
+// arrayは現在位置の駅ID(駅在宅の場合は1つの配列、駅間の場合は2つの配列)
+// stopStationIDListは停車駅の駅IDの配列 [Y01,Y02,Y05,...]
+export const findReversalPoints = (array, stopStationIDList) => {
+  try {
+    if (!stopStationIDList) return [];
+    // arrayが二次元配列だったら早期リターン
+    if (!array instanceof Array) return [];
+    if (!array) return [];
+    if (array[0] instanceof Array) 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 [];
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};

lib/eachTrainInfoCoreLib/getStationData.js

@@ -0,0 +1,15 @@
+// 駅名から駅情報を取得する
+//stationName: 駅名
+//stationList: 駅情報リスト
+export const getStationData = (stationName, stationList) => {
+  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];
+};

lib/eachTrainInfoCoreLib/getType.js

@@ -0,0 +1,11 @@
+//　種別判定
+export const getType = (string) => {
+  switch (string) {
+    case "express":
+      return "特急";
+    case "rapid":
+      return "快速";
+    default:
+      return "";
+  }
+};

lib/eachTrainInfoCoreLib/migrateTrainName.js

@@ -0,0 +1,7 @@
+// Description: 電車名の変換を行う。
+// マリンライナーやマリン表記をマリンライナーに変換する。
+export const migrateTrainName = (string) => {
+  return string
+    .replace("マリン", "マリンライナー")
+    .replace("ライナーライナー", "ライナー");
+};

lib/eachTrainInfoCoreLib/openBackTrainInfo.js

@@ -0,0 +1,68 @@
+export const openBackTrainInfo = (stationInfo, trainData, showNearTrain) => {
+  const migrationArray = (stationInfo) => {
+    const mainTrainStationPosition = trainData.findIndex(
+      (d) => d.split(",")[0] == stationInfo
+    );
+
+    const relationMain = (() => {
+      if (mainTrainStationPosition == 0) return "head";
+      if (mainTrainStationPosition == trainData.length - 1) return "tail";
+      return "middle";
+    })();
+
+    const subTrainStationPosition = showNearTrain.findIndex(
+      (d) => d.split(",")[0] == stationInfo
+    );
+    const relationSub = (() => {
+      if (subTrainStationPosition == 0) return "head";
+      if (subTrainStationPosition == showNearTrain.length - 1) return "tail";
+      return "middle";
+    })();
+
+    switch (relationMain) {
+      case "head":
+        if (relationSub == "head") {
+          return;
+        } else if (relationSub == "tail") {
+          return [
+            ...showNearTrain.slice(0, subTrainStationPosition),
+            ...trainData,
+          ];
+        } else if (relationSub == "middle") {
+          return [
+            ...showNearTrain.slice(0, subTrainStationPosition),
+            ...trainData,
+          ];
+        } else return;
+      case "tail":
+        if (relationSub == "head") {
+          return [
+            ...trainData.slice(0, mainTrainStationPosition),
+            ...showNearTrain,
+          ];
+        } else if (relationSub == "tail") {
+          return;
+        } else if (relationSub == "middle") {
+          return [
+            ...trainData.slice(0, mainTrainStationPosition),
+            ...showNearTrain.slice(subTrainStationPosition),
+          ];
+        } else return;
+      case "middle":
+        if (relationSub == "head") {
+          return [
+            ...trainData.slice(0, mainTrainStationPosition),
+            ...showNearTrain,
+          ];
+        } else if (relationSub == "tail") {
+          return [
+            ...showNearTrain.slice(0, subTrainStationPosition),
+            ...trainData.slice(mainTrainStationPosition),
+          ];
+        } else return;
+    }
+  };
+  const array = migrationArray(stationInfo);
+  if (!array) return null;
+  return array;
+};

lib/eachTrainInfoCoreLib/searchSpecialTrain.js

@@ -0,0 +1,13 @@
+// S列番の列車からDやMの列車を検索する
+export const searchSpecialTrain = (trainNum, trainList) => {
+  const searchBase = trainNum.replace("S", "").replace("X", "");
+  const search = (text) => {
+    const TD = trainList[searchBase + text];
+    if (TD) {
+      return true;
+    }
+    return false;
+  };
+  if (search("D")) return searchBase + "D";
+  if (search("M")) return searchBase + "M";
+};

lib/webViewInjectjavascript.js

@@ -6,6 +6,34 @@ export const injectJavascriptData = (
   stationMenu,
   trainMenu
 ) => {
+
+
+  const specialTrainIcon = `
+    ////ロイヤルエクスプレス
+    case "9001":
+    case "9029":
+    case "9003":
+    case "9055":  
+    case "9056":
+    case "9004":
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/izq2100rex.png');
+    break;
+  `
+  const specialTrainName = `
+    ////ロイヤルエクスプレス
+    case "9001":
+    case "9029":
+      return "ロイヤルエクスプレス\\n－瀬戸の海に想いを馳せながら－";
+    case "9003":
+      return "ロイヤルエクスプレス\\n－四国の伝統文化を感じて－";
+    case "9055":  
+    case "9056":
+      return "ロイヤルエクスプレス\\n－凪の誘い・瀬戸内の絶景－";
+    case "9004":
+      return "ロイヤルエクスプレス\\n－四国・瀬戸内の彩りに囲まれて－";
+    break;
+    `
+
   // 一番上のメニュー非表示　地図スイッチによって切り替え
   const topMenu =
     mapSwitch != "true"
@@ -464,6 +492,7 @@ export const injectJavascriptData = (
     case "8063D":
       setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s185ym1.png');
     break;
+`+specialTrainIcon+`
     default:
       break;
     }
@@ -541,6 +570,7 @@ const data = getJRF(列番データ);
   //安芸行と併結列車を個別に表示、それ以外をdefaultで下りなら既定の行き先を、上りなら奈半利行を設定
   const getTKT = num =>{
     switch(num){
+      `+specialTrainName+`
     case "5814D":
     case "5816D":
       return "ごめん・なはり線直通\\n快速 奈半利行";

package.json

@@ -20,6 +20,7 @@
     "expo-font": "~11.4.0",
     "expo-location": "~16.1.0",
     "expo-notifications": "~0.20.1",
+    "expo-sharing": "~11.5.0",
     "expo-updates": "~0.18.17",
     "expo-web-browser": "~12.3.2",
     "firebase": "8.2.3",
@@ -45,6 +46,7 @@
     "react-native-svg": "13.9.0",
     "react-native-svg-uri": "^1.2.3",
     "react-native-vector-icons": "^8.1.0",
+    "react-native-view-shot": "3.7.0",
     "react-native-webview": "^13.6.3"
   },
   "devDependencies": {

stateBox/useAllTrainDiagram.js

@@ -13,6 +13,15 @@ export const useAllTrainDiagram = () => {
 export const AllTrainDiagramProvider = ({ children }) => {
   const [allTrainDiagram, setAllTrainDiagram] = useState();
   const customData = {
+    //9001: "岡山,発,10:11#児島,発,11:05#坂出,発,11:41#高松,着,12:00#独自補完データ,提,https://x.com/makkun3/status/1750490886293848372#",
+    9001: "ウェルカムセレモニー,頃,9:40#岡山,頃,10:10#琴平,頃,14:00#琴平観光,以降,14:00#湯山荘 阿讃琴南,頃,16:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第1章\n－瀬戸の海に想いを馳せながら－\n岡山・高松・琴平,提,https://www.the-royalexpress.jp/plan/2614/#",
+    //9029: "高松,発,12:42#琴平,着,13:57#独自補完データ,提,https://x.com/makkun3/status/1750490886293848372#",
+    9029: "ウェルカムセレモニー,頃,9:40#岡山,頃,10:10#琴平,頃,14:00#琴平観光,以降,14:00#湯山荘 阿讃琴南,頃,16:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第1章\n－瀬戸の海に想いを馳せながら－\n岡山・高松・琴平,提,https://www.the-royalexpress.jp/plan/2614/#",
+    //9003: "多度津,発,10:09#今治,発,13:20#伊予亀岡,発,13:55#菊間,発,14:04#松山,着,14:50#独自補完データ,提,https://x.com/makkun3/status/1750490886293848372#",
+    9003: "湯山荘 阿讃琴南,頃,9:00#多度津,頃,10:10#松山,頃,14:50#宿泊施設,以降,14:50#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第2章\n －四国の伝統文化を感じて－\n多度津・坂出・松山,提,https://www.the-royalexpress.jp/plan/2614/#",
+    9055: "宿泊施設→バス,着,10:30#松山,頃,10:30#今治,頃,14:15#しまなみエリア観光,以降,14:15#Azumi Setoda,頃,16:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第3章\n－凪の誘い・瀬戸内の絶景－\n今治・しまなみ海道,提,https://www.the-royalexpress.jp/plan/2614/#",
+    9056: "宿泊施設→バス,着,10:30#松山,頃,10:30#今治,頃,14:15#しまなみエリア観光,以降,14:15#Azumi Setoda,頃,16:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第3章\n－凪の誘い・瀬戸内の絶景－\n今治・しまなみ海道,提,https://www.the-royalexpress.jp/plan/2614/#",
+    9004: "Azumi Setoda,頃,9:30#今治,頃,10:30#高松,頃,14:30#高松港\n↓\n瀬戸内クルーズ（貸切）\n「おりんぴあどりーむ せと」\n↓ \n 新岡山港,以降,14:15#岡山駅,頃,18:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS フィナーレ\n－四国・瀬戸内の彩りに囲まれて－\n今治・高松・岡山,提,https://www.the-royalexpress.jp/plan/2614/#",
   };
   useEffect(() => {
     fetch(

stateBox/useBusAndTrainData.js

@@ -1,7 +1,12 @@
 import React, { createContext, useContext, useState } from "react";
+import trainList from "../assets/originData/trainList";
 const initialState = {
   busAndTrainData: [],
   setBusAndTrainData: () => {},
+  trainPairData: [],
+  setTrainPairData: () => {},
+  initializeTrainPairList: () => {},
+  getInfluencedTrainData: () => {},
 };
 
 const BusAndTrainDataContext = createContext(initialState);
@@ -12,10 +17,52 @@ export const useBusAndTrainData = () => {
 
 export const BusAndTrainDataProvider = ({ children }) => {
   const [busAndTrainData, setBusAndTrainData] = useState([]);
+  const [trainPairData, setTrainPairData] = useState([]);
+  const initializeTrainPairList = () => {
+    const trainPairList = {};
+    trainPairData.forEach((d) => {
+      trainPairList[Object.keys(d)[0]] = d[Object.keys(d)[0]];
+    });
+    return trainPairList;
+  };
+  const getInfluencedTrainData = (trainNum) => {
+    const trainPairList = initializeTrainPairList();
 
+    const returnArray = [];
+    if (!trainNum) return;
+    if (trainPairList[trainNum]) {
+      returnArray.push(Object.keys(trainPairList[trainNum])[0]);
+    }
+    if (
+      // 列番が4xxDまたは5xxDの場合はxxDの列番を検索
+      new RegExp(/^4[1-9]\d\d[DM]$/).test(trainNum) ||
+      new RegExp(/^5[1-7]\d\d[DM]$/).test(trainNum)
+    ) {
+      if (trainList[trainNum.substring(1)]) {
+        returnArray.push(trainNum.substring(1));
+      }
+    }
+    if (new RegExp(/^[1-9]\d\d[DM]$/).test(trainNum)) {
+      // 列番がxxDの場合は4xxDと5xxDの列番を検索
+      if (trainList["4" + trainNum]) returnArray.push("4" + trainNum);
+      if (trainList["5" + trainNum]) returnArray.push("5" + trainNum);
+    }
+    if (!returnArray[0]) return [[], []];
+    const TD = trainList[returnArray[0]];
+    if (!TD) return [[], []];
+    const TDArray = TD.split("#").filter((d) => d != "");
+    return [returnArray, TDArray];
+  };
   return (
     <BusAndTrainDataContext.Provider
-      value={{ busAndTrainData, setBusAndTrainData }}
+      value={{
+        busAndTrainData,
+        setBusAndTrainData,
+        trainPairData,
+        setTrainPairData,
+        initializeTrainPairList,
+        getInfluencedTrainData,
+      }}
     >
       {children}
     </BusAndTrainDataContext.Provider>

yarn.lock

@@ -3439,6 +3439,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base64-arraybuffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
+  integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
+
 base64-js@^1.1.2, base64-js@^1.2.3, base64-js@^1.3.1, base64-js@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -4202,6 +4207,13 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
+css-line-break@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-2.1.0.tgz#bfef660dfa6f5397ea54116bb3cb4873edbc4fa0"
+  integrity sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==
+  dependencies:
+    utrie "^1.0.2"
+
 css-select@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
@@ -4881,6 +4893,11 @@ expo-notifications@~0.20.1:
     fs-extra "^9.1.0"
     uuid "^3.4.0"
 
+expo-sharing@~11.5.0:
+  version "11.5.0"
+  resolved "https://registry.yarnpkg.com/expo-sharing/-/expo-sharing-11.5.0.tgz#a8cad65874d882b7f75b12856b4ef55ea9b60a2d"
+  integrity sha512-uerM5YH1FKDZXfkP9ORebvlMVOPP/AfoYgYBez6a8G9fztNYHnRCA6mgK+3aQmpnb3ltmjnAZC39kH18bTNcVw==
+
 expo-structured-headers@~3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/expo-structured-headers/-/expo-structured-headers-3.3.0.tgz#9f0b041a1d243a22a4a23d9eb19f02ace3c5258c"
@@ -5653,6 +5670,14 @@ hosted-git-info@^4.0.1, hosted-git-info@^4.0.2:
   dependencies:
     lru-cache "^6.0.0"
 
+html2canvas@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
+  integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
+  dependencies:
+    css-line-break "^2.1.0"
+    text-segmentation "^1.0.3"
+
 http-cache-semantics@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a"
@@ -8858,6 +8883,13 @@ react-native-vector-icons@^8.1.0:
     prop-types "^15.7.2"
     yargs "^16.1.1"
 
+react-native-view-shot@3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/react-native-view-shot/-/react-native-view-shot-3.7.0.tgz#0c773500e7aac5d115a9dee3b83fa5156c950ed0"
+  integrity sha512-tQruLNjs7Ee/p6xUgJqF6glnatHaq/UqaIQ6KdYIFG0+XpUZdhqmEM4WMLsYfayfFEhdlF86G1S3eXMOfDNzFg==
+  dependencies:
+    html2canvas "^1.4.1"
+
 react-native-webview@^13.6.3:
   version "13.6.3"
   resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-13.6.3.tgz#f3d26e942ef5cc5a07547f2e47903aa81a68e25e"
@@ -9913,6 +9945,13 @@ terser@^5.15.0:
     commander "^2.20.0"
     source-map-support "~0.5.20"
 
+text-segmentation@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/text-segmentation/-/text-segmentation-1.0.3.tgz#52a388159efffe746b24a63ba311b6ac9f2d7943"
+  integrity sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==
+  dependencies:
+    utrie "^1.0.2"
+
 text-table@^0.2.0, text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -10267,6 +10306,13 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+utrie@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/utrie/-/utrie-1.0.2.tgz#d42fe44de9bc0119c25de7f564a6ed1b2c87a645"
+  integrity sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==
+  dependencies:
+    base64-arraybuffer "^1.0.2"
+
 uuid@9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"