Merge commit '67eed85c225f2b935e2a8f377fb46614fa9cf390'

2023-01-26 06:37:52 +09:00 · 2023-01-26 06:37:52 +09:00 · 0251b9fc2f
commit 0251b9fc2f
parent f64ccfa271 67eed85c22
12 changed files with 1474 additions and 394 deletions
--- a/App.js
+++ b/App.js
@ -25,7 +25,9 @@ if (Platform.OS === "android") {
 }
 export default function App() {
  const navigationRef = useRef();
-  useEffect(UpdateAsync, []);
+  useEffect(() => {
+    UpdateAsync();
+  }, []);
  return (
    <NavigationContainer name="Root" ref={navigationRef} style={{ flex: 1 }}>
      <Tab.Navigator>
@ -63,44 +65,38 @@ export default function App() {
    </NavigationContainer>
  );
 }
-function top() {
-  return (
-    <Stack.Navigator>
-      <Stack.Screen
-        name="Apps"
-        component={Apps}
-        options={{
-          headerShown: false,
-          gestureEnabled: true,
-          headerTransparent: true,
-        }}
-      />
-      <Stack.Screen
-        name="trainbase"
-        component={trainbase}
-        options={{
-          title: "トレインビジョン",
-          gestureEnabled: true,
-          ...TransitionPresets.SlideFromRightIOS,
-        }}
-      />
-      <Stack.Screen
-        name="howto"
-        component={howto}
-        options={{
-          title: "使い方",
-          ...optionData,
-        }}
-      />
-      <Stack.Screen name="news" component={News} options={optionData} />
-      <Stack.Screen
-        name="trainMenu"
-        component={trainMenu}
-        options={optionData}
-      />
-    </Stack.Navigator>
-  );
-}
+const top = () => (
+  <Stack.Navigator>
+    <Stack.Screen
+      name="Apps"
+      component={Apps}
+      options={{
+        headerShown: false,
+        gestureEnabled: true,
+        headerTransparent: true,
+      }}
+    />
+    <Stack.Screen
+      name="trainbase"
+      component={trainbase}
+      options={{
+        title: "トレインビジョン",
+        gestureEnabled: true,
+        ...TransitionPresets.SlideFromRightIOS,
+      }}
+    />
+    <Stack.Screen
+      name="howto"
+      component={howto}
+      options={{
+        title: "使い方",
+        ...optionData,
+      }}
+    />
+    <Stack.Screen name="news" component={News} options={optionData} />
+    <Stack.Screen name="trainMenu" component={trainMenu} options={optionData} />
+  </Stack.Navigator>
+);
 function menuPage() {
  return (
    <Stack.Navigator>
--- a/Apps.js
+++ b/Apps.js
@ -10,7 +10,7 @@ import { WebView } from "react-native-webview";
 import Constants from "expo-constants";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { news } from "./config/newsUpdate";
-import { getStationList } from "./lib/getStationList";
+import { getStationList, lineList } from "./lib/getStationList";
 import { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView";
 import { injectJavascriptData } from "./lib/webViewInjectjavascript";
 import { getStationList2 } from "./lib/getStationList2";
@ -32,10 +32,7 @@ export default function Apps(props) {
  //地図用
  const [mapsStationData, setMapsStationData] = useState(undefined);
  useEffect(() => {
-    getStationList2().then((data) => {
-      console.log(data);
-      setMapsStationData(data);
-    });
+    getStationList2().then(setMapsStationData);
  }, []);

  //駅情報画面用
@ -43,7 +40,9 @@ export default function Apps(props) {
  const [stationBoardData, setStationBoardData] = useState(undefined);
  const [originalStationList, setOriginalStationList] = useState();
  const [selectedStation, setSelectedStation] = useState(undefined);
-  useEffect(() => getStationList().then(setOriginalStationList), []);
+  useEffect(() => {
+    getStationList().then(setOriginalStationList);
+  }, []);

  //地図表示テキスト
  const injectJavascript = injectJavascriptData(
@ -59,58 +58,114 @@ export default function Apps(props) {
        if (d != news) navigate("news");
      })
      .catch((e) => navigate("news"));
+  }, []);

+  useEffect(() => {
    //列車アイコンスイッチ
    AsyncStorage.getItem("iconSwitch")
      .then((d) => {
        if (d) {
          setIconSetting(d);
        } else {
-          AsyncStorage.setItem("iconSwitch", "true").then(() =>
-            Updates.reloadAsync()
-          );
+          AsyncStorage.setItem("iconSwitch", "true").then(Updates.reloadAsync);
        }
      })
      .catch((d) =>
-        AsyncStorage.setItem("iconSwitch", "true").then(() =>
-          Updates.reloadAsync()
-        )
+        AsyncStorage.setItem("iconSwitch", "true").then(Updates.reloadAsync)
      );
+  }, []);

+  useEffect(() => {
    //地図スイッチ
    AsyncStorage.getItem("mapSwitch")
      .then((d) => {
        if (d) {
          setMapSwitch(d);
        } else {
-          AsyncStorage.setItem("mapSwitch", "false").then(() =>
-            Updates.reloadAsync()
-          );
+          AsyncStorage.setItem("mapSwitch", "false").then(Updates.reloadAsync);
        }
      })
      .catch((d) =>
-        AsyncStorage.setItem("mapSwitch", "false").then(() =>
-          Updates.reloadAsync()
-        )
+        AsyncStorage.setItem("mapSwitch", "false").then(Updates.reloadAsync)
      );
+  }, []);
+
+  useEffect(() => {
    //駅メニュースイッチ
    AsyncStorage.getItem("stationSwitch")
      .then((d) => {
        if (d) {
          setStationMenu(d);
        } else {
-          AsyncStorage.setItem("stationSwitch", "true").then(() =>
-            Updates.reloadAsync()
+          AsyncStorage.setItem("stationSwitch", "true").then(
+            Updates.reloadAsync
          );
        }
      })
      .catch((d) =>
-        AsyncStorage.setItem("stationSwitch", "true").then(() =>
-          Updates.reloadAsync()
-        )
+        AsyncStorage.setItem("stationSwitch", "true").then(Updates.reloadAsync)
      );
  }, []);

+  const onMessage = (event) => {
+    if (!event.nativeEvent.data.includes("PopUpMenu")) {
+      navigate("trainbase", { info: event.nativeEvent.data });
+      return;
+    }
+    if (!originalStationList) {
+      alert("駅名標データを取得中...");
+      return;
+    }
+    const selectedStationPDFAddress = event.nativeEvent.data
+      .split(",")[3]
+      .replace("'", "")
+      .replace("'", "");
+
+    const findStationEachLine = (selectLine) => {
+      let NearStation = selectLine.filter(
+        (d) => d.StationTimeTable == selectedStationPDFAddress
+      );
+      return NearStation;
+    };
+
+    let returnDataBase = lineList
+      .map((d) => findStationEachLine(originalStationList[d]))
+      .filter((d) => d.length > 0)
+      .reduce((pre, current) => {
+        pre.push(...current);
+        return pre;
+      }, []);
+    if (returnDataBase.length) {
+      setStationBoardData(returnDataBase);
+      StationBoardAcSR.current?.setModalVisible();
+    } else {
+      setStationBoardData(undefined);
+      StationBoardAcSR.current?.hide();
+    }
+
+    return;
+  };
+
+  const onNavigationStateChange = (event) => {
+    if (event.url != urlcache) {
+      //URL二重判定回避
+      urlcache = event.url;
+
+      if (event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")) {
+        if (Platform.OS === "android") navigate("howto");
+        webview?.current.goBack();
+        //Actions.howto();
+      } else if (
+        event.url.includes("https://train.jr-shikoku.co.jp/train.html")
+      ) {
+        //Actions.trainbase({info: event.url});
+        if (Platform.OS === "android")
+          navigate("trainbase", { info: event.url });
+        webview?.current.goBack();
+      }
+    }
+  };
+
  return (
    <View
      style={{
@ -120,7 +175,7 @@ export default function Apps(props) {
    >
      {/* {Status} */}
      <WebView
-        useWebKit={true}
+        useWebKit
        ref={webview}
        source={{ uri: "https://train.jr-shikoku.co.jp/sp.html" }}
        originWhitelist={[
@ -128,119 +183,21 @@ export default function Apps(props) {
          "https://train.jr-shikoku.co.jp/sp.html",
        ]}
        mixedContentMode={"compatibility"}
-        javaScriptEnabled={true}
-        allowsBackForwardNavigationGestures={true}
-        setSupportMultipleWindows={true}
-        onNavigationStateChange={(event) => {
-          if (event.url != urlcache) {
-            //URL二重判定回避
-            urlcache = event.url;
-
-            if (
-              event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")
-            ) {
-              if (Platform.OS === "android") navigate("howto");
-              webview?.current.goBack();
-              //Actions.howto();
-            } else if (
-              event.url.includes("https://train.jr-shikoku.co.jp/train.html")
-            ) {
-              //Actions.trainbase({info: event.url});
-              if (Platform.OS === "android")
-                navigate("trainbase", { info: event.url });
-              webview?.current.goBack();
-            }
-          }
-        }}
-        onMessage={(event) => {
-          if (!originalStationList) {
-            alert("駅名標データを取得中...");
-            return;
-          }
-          if (event.nativeEvent.data.includes("PopUpMenu")) {
-            const selectedStationPDFAddress = event.nativeEvent.data
-              .split(",")[3]
-              .replace("'", "")
-              .replace("'", "");
-
-            const findStationEachLine = (selectLine) => {
-              let NearStation = selectLine.filter(
-                (d) => d.StationTimeTable == selectedStationPDFAddress
-              );
-              return NearStation;
-            };
-
-            const lineList = [
-              "予讃線",
-              "松宇線",
-              "伊予灘線",
-              "土讃線",
-              "窪川線",
-              "高徳線",
-              "徳島線",
-              "鳴門線",
-              "瀬戸大橋線",
-            ];
-            let returnDataBase = lineList
-              .map((d) => findStationEachLine(originalStationList[d]))
-              .filter((d) => d.length > 0)
-              .reduce((pre, current) => {
-                pre.push(...current);
-                return pre;
-              }, []);
-            if (returnDataBase.length) {
-              let currentStation =
-                currentStation == undefined ? [] : currentStation;
-              setStationBoardData(returnDataBase);
-              StationBoardAcSR.current?.setModalVisible();
-            } else {
-              setStationBoardData(undefined);
-              StationBoardAcSR.current?.hide();
-            }
-
-            return;
-          }
-          navigate("trainbase", { info: event.nativeEvent.data });
-        }}
+        javaScriptEnabled
+        allowsBackForwardNavigationGestures
+        setSupportMultipleWindows
+        onNavigationStateChange={onNavigationStateChange}
+        onMessage={onMessage}
        injectedJavaScript={injectJavascript}
        onTouchMove={() => StationBoardAcSR.current?.hide()}
      />
-      <TouchableOpacity
+      <MapsButton
        onPress={() =>
          navigate("trainMenu", { webview, stationData: mapsStationData })
        }
-        style={{
-          position: "absolute",
-          top: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
-          left: 10,
-          width: 50,
-          height: 50,
-          backgroundColor: "#0099CC",
-          borderColor: "white",
-          borderStyle: "solid",
-          borderWidth: 1,
-          borderRadius: 50,
-          alignContent: "center",
-          alignSelf: "center",
-          alignItems: "center",
-          display: mapSwitch == "true" ? "flex" : "none",
-        }}
-      >
-        <View style={{ flex: 1 }} />
-        <Text
-          style={{
-            textAlign: "center",
-            width: "auto",
-            height: "auto",
-            textAlignVertical: "center",
-            fontWeight: "bold",
-            color: "white",
-          }}
-        >
-          三
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
+        top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
+        mapSwitch={mapSwitch == "true" ? "flex" : "none"}
+      />

      <StationDeteilView
        StationBoardAcSR={StationBoardAcSR}
@ -250,3 +207,39 @@ export default function Apps(props) {
    </View>
  );
 }
+
+const MapsButton = ({ onPress, top, mapSwitch }) => {
+  const styles = {
+    touch: {
+      position: "absolute",
+      top,
+      left: 10,
+      width: 50,
+      height: 50,
+      backgroundColor: "#0099CC",
+      borderColor: "white",
+      borderStyle: "solid",
+      borderWidth: 1,
+      borderRadius: 50,
+      alignContent: "center",
+      alignSelf: "center",
+      alignItems: "center",
+      display: mapSwitch,
+    },
+    text: {
+      textAlign: "center",
+      width: "auto",
+      height: "auto",
+      textAlignVertical: "center",
+      fontWeight: "bold",
+      color: "white",
+    },
+  };
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.touch}>
+      <View style={{ flex: 1 }} />
+      <Text style={styles.text}>三</Text>
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};
--- a/UpdateAsync.js
+++ b/UpdateAsync.js
@ -1,7 +1,7 @@
 import { ToastAndroid } from "react-native";
 import * as Updates from "expo-updates";

-export const UpdateAsync = () =>
+export const UpdateAsync = () => {
  Updates.checkForUpdateAsync()
    .then((update) => {
      if (!update.isAvailable) return;
@ -34,3 +34,4 @@ export const UpdateAsync = () =>
    .finally(() => {
      return;
    });
+};
--- a/app.json
+++ b/app.json
@ -17,7 +17,7 @@
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
-      "buildNumber": "22",
+      "buildNumber": "23",
      "supportsTablet": true,
      "bundleIdentifier": "jrshikokuinfo.xprocess.hrkn",
      "config": {
--- a/assets/originData/trainList.js
+++ b/assets/originData/trainList.js
--- a/components/ActionSheetComponents/JRSTraInfo.js
+++ b/components/ActionSheetComponents/JRSTraInfo.js
@ -22,7 +22,7 @@ export const JRSTraInfo = (props) => {
    <ActionSheet
      ref={JRSTraInfoEXAcSR}
      gestureEnabled
-      CustomHeaderComponent={() => {}}
+      CustomHeaderComponent={(props) => <></>}
    >
      <View
        style={{
--- a/components/ActionSheetComponents/StationDeteilView.js
+++ b/components/ActionSheetComponents/StationDeteilView.js
@ -13,7 +13,7 @@ export const StationDeteilView = (props) => {
    <ActionSheet
      ref={StationBoardAcSR}
      gestureEnabled
-      CustomHeaderComponent={() => {}}
+      CustomHeaderComponent={(props) => <></>}
    >
      <View
        key={currentStation}
--- a/components/settings.js
+++ b/components/settings.js
@ -102,7 +102,7 @@ export default function Setting(props) {
                textAlignVertical: "center",
              }}
            >
-              内部バージョン: 4.4.2.5
+              内部バージョン: 4.4.2.6
            </Text>
            <View style={{ flex: 1 }} />
          </View>
--- a/components/発車時刻表/LED_vidion.js
+++ b/components/発車時刻表/LED_vidion.js
@ -4,6 +4,7 @@ import { Switch } from "react-native-elements";
 import { widthPercentageToDP as wp } from "react-native-responsive-screen";
 import { customTrainDataDetector } from "../custom-train-data";
 import { useInterval } from "../../lib/useInterval";
+import trainList from "../../assets/originData/trainList";

 let diagramData = undefined;

@ -56,6 +57,7 @@ export default function LED_vision(props) {
    )
      .then((response) => response.text())
      .then((d) => {
+        if (d.indexOf("<title>404 Not Found</title>") != -1) throw Error;
        const val = d.replace("[\r\n", "").split(",\r\n");
        let trainDiagram = {};
        val.forEach((element) => {
@ -79,6 +81,21 @@ export default function LED_vision(props) {
          }
        });
        setStationDiagram(returnData);
+      })
+      .catch((d) => {
+        console.log("fallback");
+        setTrainDiagram(trainList);
+        let returnData = {};
+        if (!trainList) {
+          setStationDiagram(returnData);
+          return;
+        }
+        Object.keys(trainList).forEach((key) => {
+          if (trainList[key].match(props.station.Station_JP)) {
+            returnData[key] = trainList[key];
+          }
+        });
+        setStationDiagram(returnData);
      });
  }, []);

@ -122,10 +139,14 @@ export default function LED_vision(props) {
      HeaderConfig
    )
      .then((response) => response.json())
-      .then((d) => d.map((x) => ({ num: x.TrainNum, delay: x.delay })))
+      .then((d) =>
+        d.map((x) => ({ num: x.TrainNum, delay: x.delay, Pos: x.Pos }))
+      )
      .then(setCurrentTrain);

-  useEffect(getCurrentTrain, []);
+  useEffect(() => {
+    getCurrentTrain();
+  }, []);

  useInterval(getCurrentTrain, 15000);

@ -145,6 +166,18 @@ export default function LED_vision(props) {

    return false;
  };
+  const getTrainType = (data) => {
+    switch (data) {
+      case "Rapid":
+        return { color: "aqua", name: "快速" };
+      case "LTDEXP":
+        return { color: "red", name: "特急" };
+      case "NightLTDEXP":
+        return { color: "red", name: "寝台特急" };
+      case "Normal":
+        return { color: "white", name: "普通列車" };
+    }
+  };
  return (
    <View
      style={{
@ -192,40 +225,19 @@ export default function LED_vision(props) {
                    backgroundColor: "#000",
                    flexDirection: "row",
                  }}
+                  key={d.train}
                >
                  <View style={{ flex: 9 }}>
                    <Text
                      style={{
                        fontSize: train.trainName.length > 6 ? 15 : 20,
-                        color: (() => {
-                          switch (train.type) {
-                            case "Rapid":
-                              return "aqua";
-                            case "LTDEXP":
-                              return "red";
-                            case "NightLTDEXP":
-                              return "red";
-                            case "Normal":
-                              return "white";
-                          }
-                        })(),
+                        color: getTrainType(train.type).color,
                        fontWeight: "bold",
                      }}
                    >
                      {trainIDSwitch
                        ? d.train
-                        : (() => {
-                            switch (train.type) {
-                              case "Rapid":
-                                return "快速";
-                              case "LTDEXP":
-                                return "特急";
-                              case "NightLTDEXP":
-                                return "寝台特急";
-                              case "Normal":
-                                return "普通列車";
-                            }
-                          })() +
+                        : getTrainType(train.type).name +
                          " " +
                          train.trainName +
                          (train.trainNumDistance == undefined
@ -268,10 +280,18 @@ export default function LED_vision(props) {
                      }}
                    >
                      {(() => {
-                        const delay = currentTrain.filter(
+                        const current = currentTrain.filter(
                          (a) => a.num == d.train
-                        )[0].delay;
+                        )[0];
+                        const delay = current.delay;
                        switch (true) {
+                          case delay == "入線":
+                            if (current.Pos == props.station.Station_JP) {
+                              return "当駅始発";
+                            } else {
+                              return "発車前";
+                            }
+
                          case isNaN(delay):
                            return delay;
                          case delay == 0:
--- a/howto.js
+++ b/howto.js
@ -3,23 +3,12 @@ import React, { Component } from "react";
 import { StatusBar, View, TouchableOpacity, Text } from "react-native";
 import { WebView } from "react-native-webview";
 export default ({ navigation: { navigate } }) => (
-  <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+  <View style={styles.View}>
    <WebView
-      useWebKit={true}
+      useWebKit
      source={{ uri: "https://train.jr-shikoku.co.jp/usage.htm" }}
    />
-    <TouchableOpacity
-      style={{
-        padding: 10,
-        flexDirection: "row",
-        borderColor: "white",
-        borderWidth: 1,
-        margin: 10,
-        borderRadius: 5,
-        alignItems: "center",
-      }}
-      onPress={() => navigate("Apps")}
-    >
+    <TouchableOpacity style={styles.touch} onPress={() => navigate("Apps")}>
      <View style={{ flex: 1 }} />
      <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
        閉じる
@ -28,3 +17,15 @@ export default ({ navigation: { navigate } }) => (
    </TouchableOpacity>
  </View>
 );
+const styles = {
+  View: { height: "100%", backgroundColor: "#0099CC" },
+  touch: {
+    padding: 10,
+    flexDirection: "row",
+    borderColor: "white",
+    borderWidth: 1,
+    margin: 10,
+    borderRadius: 5,
+    alignItems: "center",
+  },
+};
--- a/lib/getStationList.js
+++ b/lib/getStationList.js
@ -18,6 +18,18 @@ import train_lang from "../assets/originData/train_lang";

 let status = undefined;

+export const lineList = [
+  "予讃線",
+  "松宇線",
+  "伊予灘線",
+  "土讃線",
+  "窪川線",
+  "高徳線",
+  "徳島線",
+  "鳴門線",
+  "瀬戸大橋線",
+];
+
 export const getStationList = async (props) => {
  if (status) return status;
  //駅リストイニシャライズ
--- a/menu.js
+++ b/menu.js
@ -15,9 +15,7 @@ import * as Location from "expo-location";
 import StatusbarDetect from "./StatusbarDetect";
 import { useNavigation } from "@react-navigation/native";
 import AutoHeightImage from "react-native-auto-height-image";
-import {
-  widthPercentageToDP as wp,
-} from "react-native-responsive-screen";
+import { widthPercentageToDP as wp } from "react-native-responsive-screen";
 import {
  FontAwesome,
  Foundation,
@ -33,8 +31,9 @@ import Sign from "./components/駅名表/Sign";
 import { UsefulBox } from "./components/atom/UsefulBox";
 import { TicketBox } from "./components/atom/TicketBox";
 import { TextBox } from "./components/atom/TextBox";
-import { getStationList } from "./lib/getStationList";
+import { getStationList, lineList } from "./lib/getStationList";
 import { JRSTraInfo } from "./components/ActionSheetComponents/JRSTraInfo";
+import useInterval from "./lib/useInterval";

 export default function Menu(props) {
  const {
@ -57,15 +56,17 @@ export default function Menu(props) {
        setLocation(location)
      );
    });
-    setInterval(() => {
-      Location.getCurrentPositionAsync({}).then((location) =>
-        setLocation(location)
-      );
-    }, 10000);
  }, []);

+  useInterval(() => {
+    Location.getCurrentPositionAsync({}).then((location) =>
+      setLocation(location)
+    );
+  }, 5000);
  const [originalStationList, setOriginalStationList] = useState();
-  useEffect(() => getStationList().then(setOriginalStationList), []);
+  useEffect(() => {
+    getStationList().then(setOriginalStationList);
+  }, []);

  const [stationName, setStationName] = useState(undefined);
  const [currentStation, setCurrentStation] = useState(undefined);
@ -89,17 +90,6 @@ export default function Menu(props) {
      return NearStation;
    };

-    const lineList = [
-      "予讃線",
-      "松宇線",
-      "伊予灘線",
-      "土讃線",
-      "窪川線",
-      "高徳線",
-      "徳島線",
-      "鳴門線",
-      "瀬戸大橋線",
-    ];
    let returnDataBase = lineList
      .map((d) => findStationEachLine(originalStationList[d]))
      .filter((d) => d.length > 0)
@ -144,52 +134,9 @@ export default function Menu(props) {
      }}
    >
      <StatusbarDetect />
-      <View style={{ alignItems: "center" }}>
-        <TouchableOpacity
-          onPress={() => Linking.openURL("https://www.jr-shikoku.co.jp")}
-        >
-          <AutoHeightImage
-            source={require("./assets/Header.png")}
-            resizeMode="contain"
-            width={wp("100%")}
-          />
-        </TouchableOpacity>
-      </View>
+      <TitleBar />
      <ScrollView>
-        <View style={{ flexDirection: "row" }}>
-          <UsefulBox
-            backgroundColor={"#F89038"}
-            icon="train-car"
-            flex={1}
-            onPressButton={() =>
-              Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/")
-            }
-          >
-            駅・鉄道情報
-          </UsefulBox>
-          <UsefulBox
-            backgroundColor={"#EA4752"}
-            icon="google-spreadsheet"
-            flex={1}
-            onPressButton={() =>
-              Linking.openURL(
-                "https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
-              )
-            }
-          >
-            運賃表
-          </UsefulBox>
-          <UsefulBox
-            backgroundColor={"#91C31F"}
-            icon="clipboard-list-outline"
-            flex={1}
-            onPressButton={() =>
-              Linking.openURL("https://www.jr-shikoku.co.jp/e5489/")
-            }
-          >
-            予約
-          </UsefulBox>
-        </View>
+        <TopMenuButton />
        <TextBox
          backgroundColor="#0099CC"
          flex={1}
@ -216,117 +163,13 @@ export default function Menu(props) {
            <LED_vision station={currentStation[0]} />
          </>
        )}
-        <TouchableOpacity onPress={JRSTraInfoEXAcSR.current?.setModalVisible}>
-          <View
-            style={{
-              backgroundColor: "#0099CC",
-              borderRadius: 5,
-              margin: 10,
-              borderColor: "black",
-              borderWidth: 2,
-              overflow: "hidden",
-            }}
-          >
-            <ScrollView
-              scrollEnabled={false}
-              style={{
-                backgroundColor: "#0099CC",
-                borderRadius: 5,
-                maxHeight: 300,
-              }}
-            >
-              <View
-                style={{
-                  padding: 10,
-                  flexDirection: "row",
-                  alignItems: "center",
-                }}
-              >
-                <Text
-                  style={{ fontSize: 30, fontWeight: "bold", color: "white" }}
-                >
-                  列車遅延速報EX
-                </Text>
-                <View style={{ flex: 1 }} />
-                <Text
-                  style={{ fontSize: 30, fontWeight: "bold", color: "white" }}
-                >
-                  {getTime
-                    ? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
-                      ":" +
-                      getTime.toLocaleTimeString("ja-JP").split(":")[1]
-                    : NaN}
-                </Text>
-                <Ionicons
-                  name="reload"
-                  color="white"
-                  size={30}
-                  style={{ margin: 5 }}
-                  onPress={() => {
-                    LayoutAnimation.easeInEaseOut();
-                    setLoadingDelayData(true);
-                  }}
-                />
-              </View>
-              <View
-                style={{
-                  padding: 10,
-                  backgroundColor: "white",
-                  borderBottomLeftRadius: 5,
-                  borderBottomRightRadius: 5,
-                }}
-              >
-                {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" }}>
-                        <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>
-            </ScrollView>
-            <View
-              style={{
-                position: "absolute",
-                top: 250,
-                alignItems: "center",
-                width: "100%",
-                height: 50,
-                backgroundColor: "#007FCC88",
-              }}
-            >
-              <View style={{ flex: 1 }} />
-              <Text
-                style={{ color: "white", fontWeight: "bold", fontSize: 20 }}
-              >
-                詳細を見る
-              </Text>
-              <View style={{ flex: 1 }} />
-            </View>
-          </View>
-        </TouchableOpacity>
+        <JRSTraInfoBox
+          JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}
+          getTime={getTime}
+          setLoadingDelayData={setLoadingDelayData}
+          loadingDelayData={loadingDelayData}
+          delayData={delayData}
+        />

        <View style={{ flexDirection: "row" }}>
          <TicketBox
@ -622,3 +465,168 @@ export default function Menu(props) {
    </View>
  );
 }
+
+const TitleBar = () => {
+  return (
+    <View style={{ alignItems: "center" }}>
+      <TouchableOpacity
+        onPress={() => Linking.openURL("https://www.jr-shikoku.co.jp")}
+      >
+        <AutoHeightImage
+          source={require("./assets/Header.png")}
+          resizeMode="contain"
+          width={wp("100%")}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const TopMenuButton = () => {
+  const buttonList = [
+    {
+      backgroundColor: "#F89038",
+      icon: "train-car",
+      onPress: () =>
+        Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/"),
+      title: "駅・鉄道情報",
+    },
+    {
+      backgroundColor: "#EA4752",
+      icon: "google-spreadsheet",
+      onPress: () =>
+        Linking.openURL(
+          "https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
+        ),
+      title: "運賃表",
+    },
+    {
+      backgroundColor: "#91C31F",
+      icon: "clipboard-list-outline",
+      onPress: () => Linking.openURL("https://www.jr-shikoku.co.jp/e5489/"),
+      title: "予約",
+    },
+  ];
+  return (
+    <View style={{ flexDirection: "row" }}>
+      {buttonList.map((d, index) => (
+        <UsefulBox
+          backgroundColor={d.backgroundColor}
+          icon={d.icon}
+          flex={1}
+          onPressButton={d.onPress}
+          key={index + d.icon}
+        >
+          {d.title}
+        </UsefulBox>
+      ))}
+    </View>
+  );
+};
+
+const JRSTraInfoBox = (props) => {
+  const {
+    JRSTraInfoEXAcSR,
+    getTime,
+    setLoadingDelayData,
+    loadingDelayData,
+    delayData,
+  } = props;
+  const styles = {
+    touch: {
+      backgroundColor: "#0099CC",
+      borderRadius: 5,
+      margin: 10,
+      borderColor: "black",
+      borderWidth: 2,
+      overflow: "hidden",
+    },
+    scroll: {
+      backgroundColor: "#0099CC",
+      borderRadius: 5,
+      maxHeight: 300,
+    },
+    bottom: {
+      position: "absolute",
+      top: 250,
+      alignItems: "center",
+      width: "100%",
+      height: 50,
+      backgroundColor: "#007FCC88",
+    },
+    box: {
+      padding: 10,
+      backgroundColor: "white",
+      borderBottomLeftRadius: 5,
+      borderBottomRightRadius: 5,
+    },
+  };
+  return (
+    <TouchableOpacity
+      onPress={JRSTraInfoEXAcSR.current?.setModalVisible}
+      style={styles.touch}
+    >
+      <ScrollView scrollEnabled={false} style={styles.scroll}>
+        <View
+          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
+        >
+          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+            列車遅延速報EX
+          </Text>
+          <View style={{ flex: 1 }} />
+          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+            {getTime
+              ? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
+                ":" +
+                getTime.toLocaleTimeString("ja-JP").split(":")[1]
+              : NaN}
+          </Text>
+          <Ionicons
+            name="reload"
+            color="white"
+            size={30}
+            style={{ margin: 5 }}
+            onPress={() => {
+              LayoutAnimation.easeInEaseOut();
+              setLoadingDelayData(true);
+            }}
+          />
+        </View>
+        <View style={styles.box}>
+          {loadingDelayData ? (
+            <View style={{ alignItems: "center" }}>
+              <LottieView
+                autoPlay
+                loop
+                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+                source={require("./assets/51690-loading-diamonds.json")}
+              />
+            </View>
+          ) : delayData ? (
+            delayData.map((d, index) => {
+              let data = d.split(" ");
+              return (
+                <View style={{ flexDirection: "row" }} key={index}>
+                  <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>
+      </ScrollView>
+      <View style={styles.bottom}>
+        <View style={{ flex: 1 }} />
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+          詳細を見る
+        </Text>
+        <View style={{ flex: 1 }} />
+      </View>
+    </TouchableOpacity>
+  );
+};