トップメニューのデザイン改修と地図表示の最適化

Apps.js

@@ -1,8 +1,14 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from "react";
-import {View, Platform,ToastAndroid, Text, TouchableOpacity} from 'react-native';
+import {
-import {WebView} from 'react-native-webview';
+  View,
-import Constants from 'expo-constants';
+  Platform,
-import AsyncStorage from '@react-native-async-storage/async-storage';
+  ToastAndroid,
+  Text,
+  TouchableOpacity,
+} from "react-native";
+import { WebView } from "react-native-webview";
+import Constants from "expo-constants";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 /* 
 import StatusbarDetect from './StatusbarDetect';
 var Status = StatusbarDetect(); */
@@ -10,19 +16,87 @@ var Status = StatusbarDetect(); */
 export var webview = null;
 
 export default function Apps(props) {
-  const { navigation: { navigate } } = props;
+  const {
+    navigation: { navigate },
+  } = props;
   var urlcache = "";
   const webview = useRef();
-  const [iconSetting, setIconSetting] = useState(undefined)
+  const [iconSetting, setIconSetting] = useState(undefined);
   const [mapSwitch, setMapSwitch] = useState(undefined);
 
+  const [stationData, setStationData] = useState(undefined);
+  useEffect(() => {
+    const HeaderConfig = {
+      headers: { referer: "https://train.jr-shikoku.co.jp/sp.html" },
+    };
 
-  const bootData = `
+    Promise.all([
+      fetch(
+        "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=yosan",
+        HeaderConfig
+      ).then((response) => response.json()),
+      fetch(
+        "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima",
+        HeaderConfig
+      ).then((response) => response.json()),
+      fetch(
+        "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima2",
+        HeaderConfig
+      ).then((response) => response.json()),
+      fetch(
+        "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan",
+        HeaderConfig
+      ).then((response) => response.json()),
+      fetch(
+        "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan2",
+        HeaderConfig
+      ).then((response) => response.json()),
+      fetch(
+        "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=koutoku",
+        HeaderConfig
+      ).then((response) => response.json()),
+      fetch(
+        "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=tokushima",
+        HeaderConfig
+      ).then((response) => response.json()),
+      fetch(
+        "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=naruto",
+        HeaderConfig
+      ).then((response) => response.json()),
+    ]).then((values) => {
+      let stationList = {};
+      [
+        stationList.yosan,
+        stationList.uwajima,
+        stationList.uwajima2,
+        stationList.dosan,
+        stationList.dosan2,
+        stationList.koutoku,
+        stationList.tokushima,
+        stationList.naruto,
+      ] = values;
+      setStationData(stationList);
+    });
+  }, []);
+
+  const topMenu =
+    mapSwitch != "true"
+      ? `
 document.getElementById('header').querySelector('a').style.display = 'none';
 document.getElementById('header').style.height = '50px';
 document.getElementById('main').style.paddingTop = '54px';
 
 document.getElementById('headerStr').style.display = 'none';
+`
+      : `
+document.getElementsByClassName('accordionClass')[0].style.display = 'none';
+document.getElementById('header').style.display = 'none';
+document.getElementById('main').style.paddingTop = '0px';
+document.getElementById('headerStr').style.display = 'none';
+`;
+  const bootData =
+    topMenu +
+    `
   const setReload = () =>{
     try{
       document.getElementById('refreshIcon').click();
@@ -46,11 +120,11 @@ const trainIconMaker = `
     }
     行き先アイコン.remove();
   }
-`
+`;
 
-
+  const trainIcon =
-
+    iconSetting == "true"
-const trainIcon = iconSetting == "true" ?  `
+      ? `
 switch(列番データ){
   //しおかぜメイン
   //8000 ノーマル
@@ -467,11 +541,15 @@ switch(列番データ){
   default:
     break;
 }
-` : ``;
+`
+      : ``;
 
-const JRF_icon  = iconSetting == "true" ? `
+  const JRF_icon =
+    iconSetting == "true"
+      ? `
   JRF || setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/ef210a.png');
-` : ``;
+`
+      : ``;
   const normal_train_name = `
   if(new RegExp(/^4[1-9]\\d\\d[DM]$/).test(列番データ) || new RegExp(/^5[1-7]\\d\\d[DM]$/).test(列番データ)){
     行き先情報.innerText = "ワンマン\\n"+行き先情報.innerText;
@@ -492,8 +570,9 @@ const normal_train_name = `
   else if(列番データ.indexOf("S") != -1){
     行き先情報.innerText = 行き先情報.innerText+"臨時列車\\n";
   }
+`;
+  const JRF_name =
     `
-const JRF_name = `
   let JRF = false;
   switch(列番データ){
     case "71":
@@ -575,9 +654,10 @@ const JRF_name = `
         break;
     }
   
-`
+`;
 
-const textInsert = `
+  const textInsert =
+    `
 const setStrings = () =>{
   try {
   var elements = document.querySelectorAll('[onclick]');
@@ -588,7 +668,12 @@ const setStrings = () =>{
     var flag=false;
     var TrainType = undefined;
     if(行き先情報.innerText.includes(列番データ))continue; //回避
-    `+trainIcon+normal_train_name+JRF_name+TKT_name+`
+    ` +
+    trainIcon +
+    normal_train_name +
+    JRF_name +
+    TKT_name +
+    `
     //列番付与
     行き先情報.innerText = 行き先情報.innerText+列番データ+(JRF ? "":"レ");
   }
@@ -686,89 +771,134 @@ observer.observe(target, {
     childList: true, // 子ノードの変化を監視
     //subtree: true // 子孫ノードも監視対象に含める
 });
-`
+`;
 
   const injectJavascriptData = bootData + trainIconMaker + textInsert;
 
-
-
   useEffect(() => {
     AsyncStorage.getItem("status")
-    .then(d=>{
+      .then((d) => {
         if (d != "2022/06/11") {
-        navigate('news');
+          navigate("news");
         }
       })
-    .catch(e=>{
+      .catch((e) => {
-      navigate('news');
+        navigate("news");
-    })
+      });
-  },[])
+  }, []);
   useEffect(() => {
-    AsyncStorage.getItem("iconSwitch").then( d =>{
+    AsyncStorage.getItem("iconSwitch")
+      .then((d) => {
         if (d) {
           setIconSetting(d);
+        } else {
+          AsyncStorage.setItem("iconSwitch", "true").then(() =>
+            Updates.reloadAsync()
+          );
         }
-      else{
+      })
-        AsyncStorage.setItem("iconSwitch","true").then(()=>Updates.reloadAsync())
+      .catch((d) =>
-      }
+        AsyncStorage.setItem("iconSwitch", "true").then(() =>
+          Updates.reloadAsync()
+        )
+      );
 
-       
+    AsyncStorage.getItem("mapSwitch")
-    }).catch(d=>AsyncStorage.setItem("iconSwitch","true").then(()=>Updates.reloadAsync()))
+      .then((d) => {
-
-
-    AsyncStorage.getItem("mapSwitch").then( d =>{
         if (d) {
           setMapSwitch(d);
+        } else {
+          AsyncStorage.setItem("mapSwitch", "false").then(() =>
+            Updates.reloadAsync()
+          );
         }
-      else{
+      })
-        AsyncStorage.setItem("mapSwitch","false").then(()=>Updates.reloadAsync())
+      .catch((d) =>
-      }
+        AsyncStorage.setItem("mapSwitch", "false").then(() =>
-    }).catch(d=>AsyncStorage.setItem("mapSwitch","false").then(()=>Updates.reloadAsync()))
+          Updates.reloadAsync()
-
+        )
-  },[])
+      );
-
+  }, []);
-
-  
 
   return (
-    <View style={{height:"100%",paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight: 0,}}>
+    <View
+      style={{
+        height: "100%",
+        paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
+      }}
+    >
       {/* {Status} */}
       <WebView
         useWebKit={true}
         ref={webview}
-      source={{uri: 'https://train.jr-shikoku.co.jp/sp.html'}} 
+        source={{ uri: "https://train.jr-shikoku.co.jp/sp.html" }}
-      originWhitelist={['https://train.jr-shikoku.co.jp','https://train.jr-shikoku.co.jp/sp.html']} 
+        originWhitelist={[
-      mixedContentMode={'compatibility'}
+          "https://train.jr-shikoku.co.jp",
+          "https://train.jr-shikoku.co.jp/sp.html",
+        ]}
+        mixedContentMode={"compatibility"}
         javaScriptEnabled={true}
         allowsBackForwardNavigationGestures={true}
         setSupportMultipleWindows={false}
-      onNavigationStateChange={
+        onNavigationStateChange={(event) => {
-        event =>{
           console.log(event);
-          if(event.url != urlcache){//URL二重判定回避
+          if (event.url != urlcache) {
+            //URL二重判定回避
             urlcache = event.url;
 
-            if (event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")) {
+            if (
-              if(Platform.OS==="android")navigate('howto');
+              event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")
+            ) {
+              if (Platform.OS === "android") navigate("howto");
               webview?.current.goBack();
               //Actions.howto();
-            }
+            } else if (
-            else if (event.url.includes("https://train.jr-shikoku.co.jp/train.html")) {
+              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});
+              if (Platform.OS === "android")
+                navigate("trainbase", { info: event.url });
               webview?.current.goBack();
             }
           }
-        }
+        }}
-      } 
         onMessage={(event) => {}}
-      injectedJavaScript={injectJavascriptData}/>
+        injectedJavaScript={injectJavascriptData}
-      <TouchableOpacity onPress={()=>navigate('trainMenu', {webview: webview})}  style={{position:"absolute",bottom:0,right:0,width:50,height:50,backgroundColor:"white",borderColor:"blue",borderStyle:"solid",borderWidth:1,borderRadius:50,alignContent:"center",alignSelf:"center",alignItems:"center",margin:10,display:mapSwitch == "true" ? "flex": "none"}}>
+      />
+      <TouchableOpacity
+        onPress={() => navigate("trainMenu", { webview, stationData })}
+        style={{
+          position: "absolute",
+          top: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
+          right: 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"}}>線</Text>
+        <Text
+          style={{
+            textAlign: "center",
+            width: "auto",
+            height: "auto",
+            textAlignVertical: "center",
+            fontWeight: "bold",
+            color: "white",
+          }}
+        >
+          三
+        </Text>
         <View style={{ flex: 1 }} />
       </TouchableOpacity>
-      
     </View>
   );
 }

components/news.js

@@ -1,19 +1,44 @@
-import React, {  } from 'react';
+import React from "react";
-import {View,Text,TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity } from "react-native";
-import {WebView} from 'react-native-webview';
+import { WebView } from "react-native-webview";
-import StatusbarDetect from '../StatusbarDetect';
+import StatusbarDetect from "../StatusbarDetect";
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import AsyncStorage from "@react-native-async-storage/async-storage";
 var Status = StatusbarDetect();
 export default function News(props) {
-    const { navigation: { navigate } } = props;
+  const {
+    navigation: { navigate },
+  } = props;
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-            <WebView useWebKit={true} source={{uri: 'https://nexcloud.haruk.in/sites/press-harukin/JRShikokuApps/2022-6-11'}}  mixedContentMode={'compatibility'} javaScriptEnabled={true}/>
+      <WebView
-            <TouchableOpacity style={{padding:10,flexDirection:"row",borderColor:"white",borderWidth:1,margin:10,borderRadius:5,alignItems:"center"}} onPress={()=>{AsyncStorage.setItem('status', "2022/04/14");navigate('Apps');}}>
+        useWebKit={true}
+        source={{
+          uri: "https://nexcloud.haruk.in/sites/press-harukin/JRShikokuApps/2022-6-11",
+        }}
+        mixedContentMode={"compatibility"}
+        javaScriptEnabled={true}
+      />
+      <TouchableOpacity
+        style={{
+          padding: 10,
+          flexDirection: "row",
+          borderColor: "white",
+          borderWidth: 1,
+          margin: 10,
+          borderRadius: 5,
+          alignItems: "center",
+        }}
+        onPress={() => {
+          AsyncStorage.setItem("status", "2022/06/11");
+          navigate("Apps");
+        }}
+      >
         <View style={{ flex: 1 }} />
-              <Text style={{fontSize:25,fontWeight:"bold",color:"white"}}>更新情報を閉じる</Text>
+        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+          更新情報を閉じる
+        </Text>
         <View style={{ flex: 1 }} />
       </TouchableOpacity>
     </View>
-    )
+  );
 }

components/settings.js

@@ -1,66 +1,137 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import {View,Text,TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity } from "react-native";
-import * as Updates from 'expo-updates';
+import * as Updates from "expo-updates";
-import StatusbarDetect from '../StatusbarDetect';
+import StatusbarDetect from "../StatusbarDetect";
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import AsyncStorage from "@react-native-async-storage/async-storage";
 var Status = StatusbarDetect();
-import { Switch } from 'react-native-elements';
+import { Switch } from "react-native-elements";
 
 export default function Setting(props) {
-    const { navigation: { navigate } } = props;
+  const {
-    const [iconSetting, setIconSetting] = useState(undefined)
+    navigation: { navigate },
-    const [mapSwitch, setMapSwitch] = useState(undefined)
+  } = props;
+  const [iconSetting, setIconSetting] = useState(undefined);
+  const [mapSwitch, setMapSwitch] = useState(undefined);
   useEffect(() => {
-        AsyncStorage.getItem("iconSwitch").then( d =>{
+    AsyncStorage.getItem("iconSwitch").then((d) => {
-            setIconSetting(d)
+      setIconSetting(d);
-        })
+    });
-        AsyncStorage.getItem("mapSwitch").then( d =>{
+    AsyncStorage.getItem("mapSwitch").then((d) => {
-            setMapSwitch(d)
+      setMapSwitch(d);
-        })
+    });
-    },[])
+  }, []);
   console.log(iconSetting);
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <View style={{ flex: 1, backgroundColor: "white" }}>
         <View style={{ backgroundColor: "#0099CC" }}>
-                    <Text style={{fontSize:30,fontWeight:"bold",textAlign:"center",color:"white",padding:10}}>設定画面</Text>
+          <Text
+            style={{
+              fontSize: 30,
+              fontWeight: "bold",
+              textAlign: "center",
+              color: "white",
+              padding: 10,
+            }}
+          >
+            設定画面
+          </Text>
         </View>
         <View style={{ flex: 1 }}>
           <View style={{ flexDirection: "row", padding: 10 }}>
-                        <Text style={{fontSize:25,alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center"}}>列車アイコンを表示する</Text>
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              列車アイコンを表示する
+            </Text>
             <View style={{ flex: 1 }} />
-                        <Switch value={iconSetting == "true" ? true : false} color={iconSetting == "true" ? "red": null} onValueChange={(value)=>setIconSetting(value.toString())}/>
+            <Switch
+              value={iconSetting == "true" ? true : false}
+              color={iconSetting == "true" ? "red" : null}
+              onValueChange={(value) => setIconSetting(value.toString())}
+            />
           </View>
           <View style={{ flexDirection: "row", padding: 10 }}>
-                        <Text style={{fontSize:25,alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center"}}>channel: {Updates.channel}</Text>
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              内部バージョン: 4.3.1
+            </Text>
             <View style={{ flex: 1 }} />
           </View>
           <View style={{ flexDirection: "row", padding: 10 }}>
-                        <Text style={{fontSize:25,alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center"}}>releaseChannel: {Updates.releaseChannel}</Text>
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              releaseChannel: {Updates.releaseChannel}
+            </Text>
             <View style={{ flex: 1 }} />
           </View>
 
           <View style={{ flexDirection: "row", padding: 10 }}>
-                        <Text style={{fontSize:25,alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center"}}>マップを表示する(beta)</Text>
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              マップを表示する(beta)
+            </Text>
             <View style={{ flex: 1 }} />
-                        <Switch value={mapSwitch == "true" ? true : false} color={mapSwitch == "true" ? "red": null} onValueChange={(value)=>setMapSwitch(value.toString())}/>
+            <Switch
-                    </View>
+              value={mapSwitch == "true" ? true : false}
-                    
+              color={mapSwitch == "true" ? "red" : null}
+              onValueChange={(value) => setMapSwitch(value.toString())}
+            />
           </View>
         </View>
-            <TouchableOpacity style={{padding:10,flexDirection:"row",borderColor:"white",borderWidth:1,margin:10,borderRadius:5,alignItems:"center"}} onPress={()=>{
+      </View>
+      <TouchableOpacity
+        style={{
+          padding: 10,
+          flexDirection: "row",
+          borderColor: "white",
+          borderWidth: 1,
+          margin: 10,
+          borderRadius: 5,
+          alignItems: "center",
+        }}
+        onPress={() => {
           Promise.all([
             AsyncStorage.setItem("iconSwitch", iconSetting.toString()),
-                    AsyncStorage.setItem("mapSwitch",mapSwitch.toString())
+            AsyncStorage.setItem("mapSwitch", mapSwitch.toString()),
-                ])
+          ]).then(() => {
-                .then(()=>{
+            Updates.reloadAsync();
-                    Updates.reloadAsync()
+          });
-                })
+        }}
-                }}>
+      >
         <View style={{ flex: 1 }} />
-              <Text style={{fontSize:25,fontWeight:"bold",color:"white"}}>設定を保存して再読み込み</Text>
+        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+          設定を保存して再読み込み
+        </Text>
         <View style={{ flex: 1 }} />
       </TouchableOpacity>
     </View>
-    )
+  );
 }

components/trainMenu.js

@@ -1,35 +1,28 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from "react";
-import {View,Text,TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity, Linking } from "react-native";
-import {WebView} from 'react-native-webview';
+import { WebView } from "react-native-webview";
-import StatusbarDetect from '../StatusbarDetect';
+import StatusbarDetect from "../StatusbarDetect";
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import AsyncStorage from "@react-native-async-storage/async-storage";
-import MapView,{ Marker, Geojson, PROVIDER_GOOGLE } from 'react-native-maps';
+import MapView, { Marker, Geojson, PROVIDER_GOOGLE } from "react-native-maps";
-import { FontAwesome, Fontisto, Foundation, Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import {
+  FontAwesome,
+  Fontisto,
+  Foundation,
+  Ionicons,
+  MaterialCommunityIcons,
+} from "@expo/vector-icons";
 var Status = StatusbarDetect();
-export default function trainMenu({route:{params: {webview}}, navigation:{ navigate }}){
+export default function trainMenu({
-    const [stationData,setStationData] = useState(undefined);
+  route: {
+    params: { webview, stationData },
+  },
+  navigation: { navigate },
+}) {
   const mapRef = useRef();
-    useEffect(()=>{
-        const HeaderConfig = {headers:{'referer':'https://train.jr-shikoku.co.jp/sp.html'}}
-
-        Promise.all([
-            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=yosan', HeaderConfig).then(response => response.json()),
-            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima',HeaderConfig).then(response => response.json()),
-            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima2',HeaderConfig).then(response => response.json()),
-            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan',HeaderConfig).then(response => response.json()),
-            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan2',HeaderConfig).then(response => response.json()),
-            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=koutoku',HeaderConfig).then(response => response.json()),
-            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=tokushima',HeaderConfig).then(response => response.json()),
-            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=naruto',HeaderConfig).then(response => response.json())
-        ]).then(values =>{
-            let stationList = {};
-            [stationList.yosan, stationList.uwajima, stationList.uwajima2, stationList.dosan, stationList.dosan2, stationList.koutoku, stationList.tokushima, stationList.naruto] = values;
-            setStationData(stationList);
-        })
-    },[]);
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-            <MapView style={{flex:1,width:"100%",height: "100%"}} 
+      <MapView
+        style={{ flex: 1, width: "100%", height: "100%" }}
         showsUserLocation={true}
         loadingEnabled={true}
         showsMyLocationButton={false}
@@ -38,45 +31,121 @@ export default function trainMenu({route:{params: {webview}}, navigation:{ navig
         ref={mapRef}
         //provider={PROVIDER_GOOGLE}
         initialRegion={{
-                latitude: 34.194594,
+          latitude: 33.774519,
-                longitude: 133.679633,
+          longitude: 133.533306,
-                latitudeDelta: 0.5, //小さくなるほどズーム
+          latitudeDelta: 1.8, //小さくなるほどズーム
-                longitudeDelta: 0.5,}}>
+          longitudeDelta: 1.8,
-                    {stationData && Object.keys(stationData).map(d=>
+        }}
+      >
+        {stationData &&
+          Object.keys(stationData).map((d) =>
             stationData[d].map((D, index) => {
               if (!D.StationMap) return null;
-                        const latlng = D.StationMap.replace("https://www.google.co.jp/maps/place/","").split(",");
+              const latlng = D.StationMap.replace(
+                "https://www.google.co.jp/maps/place/",
+                ""
+              ).split(",");
               if (latlng.length == 0) return null;
               return (
-                        <Marker key={index} coordinate={{latitude: parseFloat(latlng[0]),longitude: parseFloat(latlng[1])}}
+                <Marker
+                  key={index}
+                  coordinate={{
+                    latitude: parseFloat(latlng[0]),
+                    longitude: parseFloat(latlng[1]),
+                  }}
                   onPress={() => {
-                            webview.current?.injectJavaScript("MoveDisplayStation('"+d+"_"+D.MyStation+"_"+D.Station_JP+"')");
+                    webview.current?.injectJavaScript(
-                            navigate('Apps');
+                      "MoveDisplayStation('" +
-                        }}>
+                        d +
-                        </Marker>
+                        "_" +
-                        )
+                        D.MyStation +
+                        "_" +
+                        D.Station_JP +
+                        "')"
+                    );
+                    navigate("Apps");
+                  }}
+                ></Marker>
+              );
             })
           )}
       </MapView>
       <View style={{ flexDirection: "row" }}>
-            <UsefulBox backgroundColor={"#F89038"} icon="train-car" flex={1} onPressButton={()=>navigate('howto')}>使い方</UsefulBox>
+        <UsefulBox
-            <UsefulBox backgroundColor={"#EA4752"} icon="star" flex={1} onPressButton={()=>Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box")}>お気に入り</UsefulBox>
+          backgroundColor={"#F89038"}
-            <UsefulBox backgroundColor={"#91C31F"} icon="clipboard-list-outline" flex={1} onPressButton={()=>Linking.openURL("https://www.jr-shikoku.co.jp/e5489/")}>予約</UsefulBox>
+          icon="train-car"
+          flex={1}
+          onPressButton={() => navigate("howto")}
+        >
+          使い方
+        </UsefulBox>
+        <UsefulBox
+          backgroundColor={"#EA4752"}
+          icon="star"
+          flex={1}
+          onPressButton={() =>
+            /* Linking.openURL(
+              "https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
+            ) */
+            alert("お気に入り駅登録機能は現在開発中です！レイアウト募集中！")
+          }
+        >
+          お気に入り
+        </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={()=>{AsyncStorage.setItem('status', "2022/04/14");navigate('Apps');}}>
+      <TouchableOpacity
+        style={{
+          padding: 10,
+          flexDirection: "row",
+          borderColor: "white",
+          borderWidth: 1,
+          margin: 10,
+          borderRadius: 5,
+          alignItems: "center",
+        }}
+        onPress={() => {
+          AsyncStorage.setItem("status", "2022/04/14");
+          navigate("Apps");
+        }}
+      >
         <View style={{ flex: 1 }} />
-              <Text style={{fontSize:25,fontWeight:"bold",color:"white"}}>閉じる</Text>
+        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+          閉じる
+        </Text>
         <View style={{ flex: 1 }} />
       </TouchableOpacity>
     </View>
-    )
+  );
 }
 const UsefulBox = (props) => {
   const { icon, backgroundColor, flex, onPressButton, children } = props;
   return (
-    <TouchableOpacity style={{flex:flex,backgroundColor:backgroundColor,padding:10,alignItems:"center",margin:2}} onPress={onPressButton}>
+    <TouchableOpacity
+      style={{
+        flex: flex,
+        backgroundColor: backgroundColor,
+        padding: 10,
+        alignItems: "center",
+        margin: 2,
+      }}
+      onPress={onPressButton}
+    >
       <MaterialCommunityIcons name={icon} color="white" size={50} />
-      <Text style={{color:"white",fontWeight:"bold",fontSize:18}}>{children}</Text>
+      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
+        {children}
+      </Text>
     </TouchableOpacity>
-  )
+  );
-}
+};