From 0c4a4921c6572bae701098def619f1d9fab28850 Mon Sep 17 00:00:00 2001
From: harukin-DeskMini <harukin@haruk.in>
Date: Sat, 8 Oct 2022 23:41:50 +0900
Subject: [PATCH] =?UTF-8?q?webView=E5=8A=A0=E5=B7=A5=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E5=88=97=E3=81=AE=E5=88=86=E9=9B=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Apps.js                        | 786 +--------------------------------
 lib/webViewInjectjavascript.js | 719 ++++++++++++++++++++++++++++++
 2 files changed, 736 insertions(+), 769 deletions(-)
 create mode 100644 lib/webViewInjectjavascript.js

diff --git a/Apps.js b/Apps.js
index c596e98..718d60f 100644
--- a/Apps.js
+++ b/Apps.js
@@ -10,6 +10,9 @@ 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 { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView";
+import { injectJavascriptData } from "./lib/webViewInjectjavascript";
 /* 
 import StatusbarDetect from './StatusbarDetect';
 var Status = StatusbarDetect(); */
@@ -24,778 +27,17 @@ export default function Apps(props) {
   const [mapSwitch, setMapSwitch] = useState(undefined);
 
   const [stationData, setStationData] = useState(undefined);
+  const StationBoardAcSR = useRef(null);
+  const [currentStation, setCurrentStation] = useState(undefined);
+  const [originalStationList, setOriginalStationList] = useState();
   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);
+    getStationList().then((stationList) => {
+      console.log(stationList);
+      setOriginalStationList(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();
-      setStrings();
-    }catch{
-  
-    }
-    setTimeout(setReload, 10000);
-  }
-  setReload();
-`;
-
-  const trainIconMaker = `
-  const setStationIcon = (行き先アイコン,img) =>{
-    let newItem = document.createElement("div");
-    if(行き先アイコン.getAttribute("style").includes("left")){
-      行き先アイコン.insertAdjacentHTML('beforebegin', "<img src="+img+" style='float:left;height:20px;'>");
-    }
-    else{
-      行き先アイコン.insertAdjacentHTML('beforebegin', "<img src="+img+" style='float:right;height:20px;'>");
-    }
-    行き先アイコン.remove();
-  }
-`;
-
-  const trainIcon =
-    iconSetting == "true"
-      ? `
-switch(列番データ){
-  //しおかぜメイン
-  //8000 ノーマル
-  case "2M":
-  case "4M":
-  case "6M":
-  case "14M":
-  case "16M":
-  case "18M":
-  case "26M":
-  case "28M":
-  case "30M":
-  case "1M":
-  case "3M":
-  case "5M":
-  case "13M":
-  case "15M":
-  case "17M":
-  case "25M":
-  case "27M":
-  case "29M":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8000nr.png');
-    break;
-  //8000 アンパン
-  case "10M":
-  case "22M":
-  case "9M":
-  case "21M":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s8000ap.png');
-    break;
-
-
-  //8600
-  case "8M":
-  case "12M":
-  case "20M":
-  case "24M":
-  case "7M":
-  case "11M":
-  case "19M":
-  case "23M":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8600.png');
-    break;
-
-  //いしづちメイン
-  //8000 ノーマル
-
-  case "1004M":
-  case "1006M":
-  case "1014M":
-  case "1016M":
-  case "1018M":
-  case "1026M":
-  case "1028M":
-  case "1030M":
-  case "1001M":
-  case "1003M":
-  case "1005M":
-  case "1013M":
-  case "1015M":
-  case "1017M":
-  case "1025M":
-  case "1027M":
-  case "1029M":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8000no.png');
-    break;
-
-  //8000 アンパン
-  case "1010M":
-  case "1022M":
-  case "1009M":
-  case "1021M":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s8000ap.png');
-    break;
-
-  //8600
-  case "1008M":
-  case "1012M":
-  case "1020M":
-  case "1024M":
-  case "1007M":
-  case "1011M":
-  case "1019M":
-  case "1023M":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8600_isz.png');
-    break;
-
-  //MEXP
-  //8000
-  case "1092M":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8000no.png');
-    break;
-  //8600
-  case "1091M":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8600_isz.png');
-    break;
-  //三桁いしづち
-  //8000 アンパン
-  case "1041M":
-  case "1044M":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s8000ap.png');
-    break;
-  //8600
-  case "1043M":
-  case "1042M":
-  case "1046M":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8600_isz.png');
-    break;
-
-
-  //南風 2700ノーマル
-  case "34D":
-  case "38D":
-  case "40D":
-  case "42D":
-  case "46D":
-  case "50D":
-  case "52D":
-  case "54D":
-  case "58D":
-  case "31D":
-  case "35D":
-  case "39D":
-  case "41D":
-  case "43D":
-  case "47D":
-  case "51D":
-  case "53D":
-  case "55D":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2700.png');
-    break;
-  //2700アンパン
-  case "32D":
-  case "36D":
-  case "44D":
-  case "48D":
-  case "56D":
-  case "33D":
-  case "37D":
-  case "45D":
-  case "49D":
-  case "57D":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s2700apr.png');
-    break;
-  
-
-  
-  //うずしお
-  //2700
-  case "5006D":
-  case "5022D":
-  case "5013D":
-  case "5029D":
-  case "3002D":
-  case "3004D":
-  case "3010D":
-  case "3012D":
-  case "3016D":
-  case "3018D":
-  case "3024D":
-  case "3028D":
-  case "3030D":
-  case "3003D":
-  case "3005D":
-  case "3007D":
-  case "3015D":
-  case "3019D":
-  case "3021D":
-  case "3025D":
-  case "3027D":
-  case "3031D":
-  case "3033D":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2700_uzu.png');
-    break;
-  
-  //2600
-  case "3008D":
-  case "3014D":
-  case "3020D":
-  case "3026D":
-  case "3001D":
-  case "3011D":
-  case "3017D":
-  case "3023D":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2600.png');
-    break;
-  
-  //キハ185
-  case "3009D":
-  case "3032D":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185tu_uzu.png');
-    break;
-    
-  //マリンライナー
-  case "3104M":
-  case "3106M":
-  case "3108M":
-  case "3110M":
-  case "3112M":
-  case "3114M":
-  case "3116M":
-  case "3118M":
-  case "3120M":
-  case "3122M":
-  case "3124M":
-  case "3126M":
-  case "3128M":
-  case "3130M":
-  case "3132M":
-  case "3134M":
-  case "3136M":
-  case "3138M":
-  case "3140M":
-  case "3142M":
-  case "3144M":
-  case "3146M":
-  case "3148M":
-  case "3150M":
-  case "3152M":
-  case "3154M":
-  case "3156M":
-  case "3158M":
-  case "3160M":
-  case "3162M":
-  case "3164M":
-  case "3166M":
-  case "3168M":
-  case "3170M":
-  case "3105M":
-  case "3107M":
-  case "3109M":
-  case "3111M":
-  case "3113M":
-  case "3115M":
-  case "3117M":
-  case "3119M":
-  case "3121M":
-  case "3123M":
-  case "3125M":
-  case "3127M":
-  case "3129M":
-  case "3131M":
-  case "3133M":
-  case "3135M":
-  case "3137M":
-  case "3139M":
-  case "3141M":
-  case "3143M":
-  case "3145M":
-  case "3147M":
-  case "3149M":
-  case "3151M":
-  case "3153M":
-  case "3155M":
-  case "3157M":
-  case "3159M":
-  case "3161M":
-  case "3163M":
-  case "3165M":
-  case "3167M":
-  case "3169M":
-  case "3175M":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s5001.png');
-    break;
-  case "3102M":
-  case "3101M":
-  case "3103M":
-  case "3171M":
-  case "3173M":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s5001k.png');
-    break;
-
-  //サンライズ瀬戸
-  case "5032M":
-  case "5031M":
-  case "8041M": //琴平延長高松迄
-  case "8031M": //琴平延長高松以降
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/w285.png');
-    break;
-
-  //宇和海
-  //2000 ノーマル
-  case "1052D":
-  case "1056D":
-  case "1058D":
-  case "1064D":
-  case "1070D":
-  case "1074D":
-  case "1076D":
-  case "1078D":
-  case "1080D":
-  case "1082D":
-  case "1051D":
-  case "1059D":
-  case "1065D":
-  case "1069D":
-  case "1071D":
-  case "1073D":
-  case "1075D":
-  case "1077D":
-  case "1079D":
-  case "1053D":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2000_uwa.png');
-  break;
-  //2000 アンパン込み
-  case "1054D":
-  case "1060D":
-  case "1062D":
-  case "1066D":
-  case "1068D":
-  case "1072D":
-  case "1055D":
-  case "1057D":
-  case "1061D":
-  case "1063D":
-  case "1067D":
-  case "1081D":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s2002a.png');
-  break;
-  //しまんと
-  case "2002D":
-  case "2004D":
-  case "2006D":
-  case "2008D":
-  case "2001D":
-  case "2003D":
-  case "2005D":
-  case "2007D":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2700_smn.png');
-  break;
-
-  //あしずり 2000
-  case "2074D":
-  case "2076D":
-  case "2080D":
-  case "2084D":
-  case "2086D":
-  case "2071D":
-  case "2075D":
-  case "2077D":
-  case "2081D":
-  case "2083D":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2000_asi.png');
-  break;
-  
-  //あしずり 2700
-  case "2078D":
-  case "2082D":
-  case "2088D":
-  case "2073D":
-  case "2079D":
-  case "2085D":
-  case "2072D":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2700_asi.png');
-  break;
-  //剣山
-  case "4002D":
-  case "4004D":
-  case "4006D":
-  case "4008D":
-  case "4010D":
-  case "4001D":
-  case "4003D":
-  case "4005D":
-  case "4007D":
-  case "4009D":
-  case "4011D":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185tu.png');
-  break;
-  //むろと
-  case "5051D":
-  case "5052D":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185_mrt.png');
-  break;
-
-  
-  //よしのがわトロッコ
-  case "8452D":
-  case "8451D":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s185to_ai.png');
-  break;
-
-  //岡山高松アントロ
-  case "8176D":
-  case "8179D":
-  //岡山琴平アントロ
-  case "8277D":
-  case "8278D":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s32to4.png');
-  break;
-
-  //伊予灘ものがたり
-  case "8901D":
-  case "8903D":
-  case "8902D":
-  case "8904D":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185iyoy.png');
-  break;
-
-
-  //千年ものがたり
-  case "8011D":
-  case "8012D":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185mm1.png');
-  break;
-
-  //夜明けものがたり
-  case "8053D":
-  case "8054D":
-  case "8062D":
-  case "8063D":
-    setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185ym1.png');
-  break;
-  default:
-    break;
-}
-`
-      : ``;
-
-  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;
-    flag=true;
-  }
-  if(new RegExp(/^49[0-4]\\dD$/).test(列番データ) || new RegExp(/^9[0-4]\\dD$/).test(列番データ)){
-    行き先情報.innerText = "(海経由)"+(flag ? "" : "\\n")+行き先情報.innerText;
-  }
-  if(new RegExp(/^46\\d\\dD$/).test(列番データ) || new RegExp(/^6\\d\\dD$/).test(列番データ)){
-    行き先情報.innerText = "(内子経由)"+(flag ? "" : "\\n")+行き先情報.innerText;
-  }
-  if(列番データ.indexOf("H") != -1){
-    行き先情報.innerText = 行き先情報.innerText+"試運転\\n";
-  }
-  else if(列番データ.indexOf("R") != -1){
-    行き先情報.innerText = 行き先情報.innerText+"回送\\n";
-  }
-  else if(列番データ.indexOf("S") != -1){
-    行き先情報.innerText = 行き先情報.innerText+"臨時列車\\n";
-  }
-`;
-  const JRF_name =
-    `
-  let JRF = false;
-  switch(列番データ){
-    case "71":
-      行き先情報.innerText = "東京(タ)→高松(タ)"+"\\n"+行き先情報.innerText;
-      break;
-    case "73":
-    case "75":
-      行き先情報.innerText = "大阪(タ)→高松(タ)"+"\\n"+行き先情報.innerText;
-      break;
-    case "3079":
-      行き先情報.innerText = "高松(タ)→伊予三島"+"\\n"+行き先情報.innerText;
-      break;
-    case "3071":
-    case "3077":
-      行き先情報.innerText = "高松(タ)→新居浜"+"\\n"+行き先情報.innerText;
-      break;
-    case "3073":
-      行き先情報.innerText = "高松(タ)→松山貨物"+"\\n"+行き先情報.innerText;
-      break;
-    case "70":
-      行き先情報.innerText = "高松(タ)→東京(タ)"+"\\n"+行き先情報.innerText;
-      break;
-    case "74":
-    case "76":
-      行き先情報.innerText = "高松(タ)→大阪(タ)"+"\\n"+行き先情報.innerText;
-      break;
-    case "3078":
-      行き先情報.innerText = "伊予三島→高松(タ)"+"\\n"+行き先情報.innerText;
-      break;
-    case "3070":
-      行き先情報.innerText = "新居浜→高松(タ)"+"\\n"+行き先情報.innerText;
-      break;
-    case "3076":
-      行き先情報.innerText = "新居浜→高松(タ)"+"\\n"+行き先情報.innerText;
-      break;
-    case "3072":
-      行き先情報.innerText = "松山貨物→高松(タ)"+"\\n"+行き先情報.innerText;
-      break;
-    case "9070":
-      行き先情報.innerText = "臨時貨物"+"\\n"+行き先情報.innerText;
-      break;
-    default:
-      JRF = true;
-  }
-  ` + JRF_icon;
-
-  const TKT_name = `
-    //安芸行と併結列車を個別に表示、それ以外をdefaultで下りなら既定の行き先を、上りなら奈半利行を設定
-    switch(列番データ){
-      case "5814D":
-      case "5816D":
-        行き先情報.innerText = "ごめん・なはり線直通\\n快速 奈半利行";
-        break;
-      case "5812D":
-        行き先情報.innerText = "ごめん・なはり線直通\\n快速 安芸行";
-        break;
-      case "5874D":
-      case "5882D":
-        行き先情報.innerText = "ごめん・なはり線直通\\n各停 安芸行";
-        break;
-      case "742D":
-      case "746D":
-        行き先情報.innerText = "土佐山田/奈半利行\\n(後免にて解結)\\nごめん・なはり線快速";
-        break;
-      default:
-        if(new RegExp(/^58[1-3][1,3,5,7,9][DM]$/).test(列番データ)){
-          行き先情報.innerText = "ごめん・なはり線直通\\n快速 "+行き先情報.innerText;
-        }
-        else if(new RegExp(/^58[4-9][1,3,5,7,9][DM]$/).test(列番データ)){
-          行き先情報.innerText = "ごめん・なはり線直通\\n各停 "+行き先情報.innerText;
-        }
-  
-        else if(new RegExp(/^58[3-4][0,2,4,6,8][DM]$/).test(列番データ)){
-          行き先情報.innerText = "ごめん・なはり線直通\\n快速 奈半利行";
-        }
-        else if(new RegExp(/^58[5-9][0,2,4,6,8][DM]$/).test(列番データ)){
-          行き先情報.innerText = "ごめん・なはり線直通\\n各停 奈半利行";
-        }
-        break;
-    }
-  
-`;
-
-  const textInsert =
-    `
-const setStrings = () =>{
-  try {
-  var elements = document.querySelectorAll('[onclick]');
-  for (let element of elements) {
-    if(element.getAttribute('onclick').indexOf('ShowTrainTimeInfo') == -1) continue;
-    var 行き先情報 = element.getElementsByTagName("p")[0];
-    var 列番データ = element.getAttribute('onclick').split('"')[1];
-    var flag=false;
-    var TrainType = undefined;
-    if(行き先情報.innerText.includes(列番データ))continue; //回避
-    ` +
-    trainIcon +
-    normal_train_name +
-    JRF_name +
-    TKT_name +
-    `
-    //列番付与
-    行き先情報.innerText = 行き先情報.innerText+列番データ+(JRF ? "":"レ");
-  }
-  try{
-  for(let d of document.getElementById('disp').childNodes){
-    switch(d.id){
-      case 'pMENU_2':
-      case 'pMENU_2_En':
-      case 'pMENU_3':
-      case 'pMENU_3_En':
-      case 'pMENU_k':
-      case 'pMENU_k_En':
-        continue;
-      default:
-        break;
-    }
-
-    d.style.width = '100vw';
-    for(let f of d.childNodes){
-      try{
-        if(f.style.alignItems || f.style.textAlign){
-          f.style.width = '38vw';
-        }
-        else{
-          if(f.id == 'upTrainCrossBar'){
-            f.style.width = '38vw';
-          }
-          else if(f.id == 'dwTrainCrossBar'){
-            f.style.left = '62vw';
-            f.style.width = '38vw';
-
-          }
-          else {
-            f.style.width = '0vw';
-          }
-        }
-        if(f.style.textAlign == 'center'){
-          f.style.width = '24vw';
-          f.style.display = 'flex';
-          f.childNodes.forEach(i =>{
-            i.style.width = 'unset';
-            i.style.left = 'unset';
-            i.style.top = 'unset';
-            i.style.position = 'unset';
-            i.style.flex = '1';
-            i.style.margin = '5px'
-
-            if(i.style.backgroundColor != 'rgb(247, 247, 247)'){
-              i.childNodes.forEach(m=> m.style.width = '20vw')
-            }
-          })
-        }
-        
-      }catch(e){}
-    }
-  }
-
-
-
-  document.querySelector('#pMENU_2').style.borderStyle='solid';
-  document.querySelector('#pMENU_2').style.borderColor='#00d3e8';
-  document.querySelector('#pMENU_2').style.borderWidth='2px';
-  document.querySelector('#pMENU_2').style.borderRadius='10%';
-  document.querySelector('#pMENU_3').style.borderStyle='solid';
-  document.querySelector('#pMENU_3').style.borderColor='#00d3e8';
-  document.querySelector('#pMENU_3').style.borderWidth='2px';
-  document.querySelector('#pMENU_3').style.borderRadius='10%';
-  document.querySelectorAll('#pMENU_2 div').forEach((d)=>d.style.padding = '10px'); 
-  document.querySelectorAll('#pMENU_3 div').forEach((d)=>d.style.padding = '10px'); 
-  document.querySelectorAll('#topHeader div').forEach((d)=>d.style.width = '100vw'); 
-  document.querySelectorAll('#disp div')[0].style.width = '100vw'; 
-  document.getElementById('disp').style.width = '100vw';
-  document.getElementById('disp').style.overflowX = 'hidden';
-
-
-    
-  }catch(e){
-    alert("にゃーん");
-  }
-  } catch (e) {}
-  //setTimeout(setStrings,500);
-}
-const target = document.getElementById('disp'); // body要素を監視
-const observer = new MutationObserver( (mutations) => {
-  // observer.disconnect(); // 監視を終了
-  setStrings();
-});
-
-// 監視を開始
-observer.observe(target, {
-    attributes: true, // 属性変化の監視
-    //attributeOldValue: true, // 変化前の属性値を matation.oldValue に格納する
-    //characterData: true, // テキストノードの変化を監視
-    //characterDataOldValue: true, // 変化前のテキストを matation.oldValue に格納する
-    childList: true, // 子ノードの変化を監視
-    //subtree: true // 子孫ノードも監視対象に含める
-});
-`;
-
-  const modal_content = `
-
-const modal_content = document.getElementById('modal_content'); // body要素を監視
-const modal_observer = new MutationObserver( (mutations) => {
-  // observer.disconnect(); // 監視を終了
-  for(let d of modal_content.getElementsByTagName("button") ){
-    const data = d.onclick.toString().split("\\"")[1];
-    d.onclick = () => window.ReactNativeWebView.postMessage(data)
-  }
-});
-
-// 監視を開始
-modal_observer.observe(modal_content, {
-    //attributes: true, // 属性変化の監視
-    //attributeOldValue: true, // 変化前の属性値を matation.oldValue に格納する
-    //characterData: true, // テキストノードの変化を監視
-    //characterDataOldValue: true, // 変化前のテキストを matation.oldValue に格納する
-    childList: true, // 子ノードの変化を監視
-    //subtree: true // 子孫ノードも監視対象に含める
-});
-`;
-
-  const injectJavascriptData =
-    bootData + modal_content + trainIconMaker + textInsert;
+  const injectJavascript = injectJavascriptData(mapSwitch, iconSetting);
 
   useEffect(() => {
     AsyncStorage.getItem("status")
@@ -888,7 +130,7 @@ modal_observer.observe(modal_content, {
           console.log(event.nativeEvent.data);
           navigate("trainbase", { info: event.nativeEvent.data });
         }}
-        injectedJavaScript={injectJavascriptData}
+        injectedJavaScript={injectJavascript}
       />
       <TouchableOpacity
         onPress={() => navigate("trainMenu", { webview, stationData })}
@@ -924,6 +166,12 @@ modal_observer.observe(modal_content, {
         </Text>
         <View style={{ flex: 1 }} />
       </TouchableOpacity>
+
+      <StationDeteilView
+        StationBoardAcSR={StationBoardAcSR}
+        currentStation={currentStation}
+        originalStationList={originalStationList}
+      />
     </View>
   );
 }
diff --git a/lib/webViewInjectjavascript.js b/lib/webViewInjectjavascript.js
new file mode 100644
index 0000000..15ff2e4
--- /dev/null
+++ b/lib/webViewInjectjavascript.js
@@ -0,0 +1,719 @@
+export const injectJavascriptData = (mapSwitch, iconSetting) => {
+  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();
+    setStrings();
+  }catch{
+
+  }
+  setTimeout(setReload, 10000);
+}
+setReload();
+`;
+
+  const trainIconMaker = `
+const setStationIcon = (行き先アイコン,img) =>{
+  let newItem = document.createElement("div");
+  if(行き先アイコン.getAttribute("style").includes("left")){
+    行き先アイコン.insertAdjacentHTML('beforebegin', "<img src="+img+" style='float:left;height:20px;'>");
+  }
+  else{
+    行き先アイコン.insertAdjacentHTML('beforebegin', "<img src="+img+" style='float:right;height:20px;'>");
+  }
+  行き先アイコン.remove();
+}
+`;
+
+  const trainIcon =
+    iconSetting == "true"
+      ? `
+switch(列番データ){
+//しおかぜメイン
+//8000 ノーマル
+case "2M":
+case "4M":
+case "6M":
+case "14M":
+case "16M":
+case "18M":
+case "26M":
+case "28M":
+case "30M":
+case "1M":
+case "3M":
+case "5M":
+case "13M":
+case "15M":
+case "17M":
+case "25M":
+case "27M":
+case "29M":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8000nr.png');
+  break;
+//8000 アンパン
+case "10M":
+case "22M":
+case "9M":
+case "21M":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s8000ap.png');
+  break;
+
+
+//8600
+case "8M":
+case "12M":
+case "20M":
+case "24M":
+case "7M":
+case "11M":
+case "19M":
+case "23M":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8600.png');
+  break;
+
+//いしづちメイン
+//8000 ノーマル
+
+case "1004M":
+case "1006M":
+case "1014M":
+case "1016M":
+case "1018M":
+case "1026M":
+case "1028M":
+case "1030M":
+case "1001M":
+case "1003M":
+case "1005M":
+case "1013M":
+case "1015M":
+case "1017M":
+case "1025M":
+case "1027M":
+case "1029M":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8000no.png');
+  break;
+
+//8000 アンパン
+case "1010M":
+case "1022M":
+case "1009M":
+case "1021M":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s8000ap.png');
+  break;
+
+//8600
+case "1008M":
+case "1012M":
+case "1020M":
+case "1024M":
+case "1007M":
+case "1011M":
+case "1019M":
+case "1023M":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8600_isz.png');
+  break;
+
+//MEXP
+//8000
+case "1092M":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8000no.png');
+  break;
+//8600
+case "1091M":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8600_isz.png');
+  break;
+//三桁いしづち
+//8000 アンパン
+case "1041M":
+case "1044M":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s8000ap.png');
+  break;
+//8600
+case "1043M":
+case "1042M":
+case "1046M":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8600_isz.png');
+  break;
+
+
+//南風 2700ノーマル
+case "34D":
+case "38D":
+case "40D":
+case "42D":
+case "46D":
+case "50D":
+case "52D":
+case "54D":
+case "58D":
+case "31D":
+case "35D":
+case "39D":
+case "41D":
+case "43D":
+case "47D":
+case "51D":
+case "53D":
+case "55D":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2700.png');
+  break;
+//2700アンパン
+case "32D":
+case "36D":
+case "44D":
+case "48D":
+case "56D":
+case "33D":
+case "37D":
+case "45D":
+case "49D":
+case "57D":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s2700apr.png');
+  break;
+
+
+
+//うずしお
+//2700
+case "5006D":
+case "5022D":
+case "5013D":
+case "5029D":
+case "3002D":
+case "3004D":
+case "3010D":
+case "3012D":
+case "3016D":
+case "3018D":
+case "3024D":
+case "3028D":
+case "3030D":
+case "3003D":
+case "3005D":
+case "3007D":
+case "3015D":
+case "3019D":
+case "3021D":
+case "3025D":
+case "3027D":
+case "3031D":
+case "3033D":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2700_uzu.png');
+  break;
+
+//2600
+case "3008D":
+case "3014D":
+case "3020D":
+case "3026D":
+case "3001D":
+case "3011D":
+case "3017D":
+case "3023D":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2600.png');
+  break;
+
+//キハ185
+case "3009D":
+case "3032D":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185tu_uzu.png');
+  break;
+  
+//マリンライナー
+case "3104M":
+case "3106M":
+case "3108M":
+case "3110M":
+case "3112M":
+case "3114M":
+case "3116M":
+case "3118M":
+case "3120M":
+case "3122M":
+case "3124M":
+case "3126M":
+case "3128M":
+case "3130M":
+case "3132M":
+case "3134M":
+case "3136M":
+case "3138M":
+case "3140M":
+case "3142M":
+case "3144M":
+case "3146M":
+case "3148M":
+case "3150M":
+case "3152M":
+case "3154M":
+case "3156M":
+case "3158M":
+case "3160M":
+case "3162M":
+case "3164M":
+case "3166M":
+case "3168M":
+case "3170M":
+case "3105M":
+case "3107M":
+case "3109M":
+case "3111M":
+case "3113M":
+case "3115M":
+case "3117M":
+case "3119M":
+case "3121M":
+case "3123M":
+case "3125M":
+case "3127M":
+case "3129M":
+case "3131M":
+case "3133M":
+case "3135M":
+case "3137M":
+case "3139M":
+case "3141M":
+case "3143M":
+case "3145M":
+case "3147M":
+case "3149M":
+case "3151M":
+case "3153M":
+case "3155M":
+case "3157M":
+case "3159M":
+case "3161M":
+case "3163M":
+case "3165M":
+case "3167M":
+case "3169M":
+case "3175M":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s5001.png');
+  break;
+case "3102M":
+case "3101M":
+case "3103M":
+case "3171M":
+case "3173M":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s5001k.png');
+  break;
+
+//サンライズ瀬戸
+case "5032M":
+case "5031M":
+case "8041M": //琴平延長高松迄
+case "8031M": //琴平延長高松以降
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/w285.png');
+  break;
+
+//宇和海
+//2000 ノーマル
+case "1052D":
+case "1056D":
+case "1058D":
+case "1064D":
+case "1070D":
+case "1074D":
+case "1076D":
+case "1078D":
+case "1080D":
+case "1082D":
+case "1051D":
+case "1059D":
+case "1065D":
+case "1069D":
+case "1071D":
+case "1073D":
+case "1075D":
+case "1077D":
+case "1079D":
+case "1053D":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2000_uwa.png');
+break;
+//2000 アンパン込み
+case "1054D":
+case "1060D":
+case "1062D":
+case "1066D":
+case "1068D":
+case "1072D":
+case "1055D":
+case "1057D":
+case "1061D":
+case "1063D":
+case "1067D":
+case "1081D":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s2002a.png');
+break;
+//しまんと
+case "2002D":
+case "2004D":
+case "2006D":
+case "2008D":
+case "2001D":
+case "2003D":
+case "2005D":
+case "2007D":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2700_smn.png');
+break;
+
+//あしずり 2000
+case "2074D":
+case "2076D":
+case "2080D":
+case "2084D":
+case "2086D":
+case "2071D":
+case "2075D":
+case "2077D":
+case "2081D":
+case "2083D":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2000_asi.png');
+break;
+
+//あしずり 2700
+case "2078D":
+case "2082D":
+case "2088D":
+case "2073D":
+case "2079D":
+case "2085D":
+case "2072D":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s2700_asi.png');
+break;
+//剣山
+case "4002D":
+case "4004D":
+case "4006D":
+case "4008D":
+case "4010D":
+case "4001D":
+case "4003D":
+case "4005D":
+case "4007D":
+case "4009D":
+case "4011D":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185tu.png');
+break;
+//むろと
+case "5051D":
+case "5052D":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185_mrt.png');
+break;
+
+
+//よしのがわトロッコ
+case "8452D":
+case "8451D":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s185to_ai.png');
+break;
+
+//岡山高松アントロ
+case "8176D":
+case "8179D":
+//岡山琴平アントロ
+case "8277D":
+case "8278D":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s32to4.png');
+break;
+
+//伊予灘ものがたり
+case "8901D":
+case "8903D":
+case "8902D":
+case "8904D":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185iyoy.png');
+break;
+
+
+//千年ものがたり
+case "8011D":
+case "8012D":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185mm1.png');
+break;
+
+//夜明けものがたり
+case "8053D":
+case "8054D":
+case "8062D":
+case "8063D":
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s185ym1.png');
+break;
+default:
+  break;
+}
+`
+      : ``;
+
+  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;
+  flag=true;
+}
+if(new RegExp(/^49[0-4]\\dD$/).test(列番データ) || new RegExp(/^9[0-4]\\dD$/).test(列番データ)){
+  行き先情報.innerText = "(海経由)"+(flag ? "" : "\\n")+行き先情報.innerText;
+}
+if(new RegExp(/^46\\d\\dD$/).test(列番データ) || new RegExp(/^6\\d\\dD$/).test(列番データ)){
+  行き先情報.innerText = "(内子経由)"+(flag ? "" : "\\n")+行き先情報.innerText;
+}
+if(列番データ.indexOf("H") != -1){
+  行き先情報.innerText = 行き先情報.innerText+"試運転\\n";
+}
+else if(列番データ.indexOf("R") != -1){
+  行き先情報.innerText = 行き先情報.innerText+"回送\\n";
+}
+else if(列番データ.indexOf("S") != -1){
+  行き先情報.innerText = 行き先情報.innerText+"臨時列車\\n";
+}
+`;
+  const JRF_name =
+    `
+let JRF = false;
+switch(列番データ){
+  case "71":
+    行き先情報.innerText = "東京(タ)→高松(タ)"+"\\n"+行き先情報.innerText;
+    break;
+  case "73":
+  case "75":
+    行き先情報.innerText = "大阪(タ)→高松(タ)"+"\\n"+行き先情報.innerText;
+    break;
+  case "3079":
+    行き先情報.innerText = "高松(タ)→伊予三島"+"\\n"+行き先情報.innerText;
+    break;
+  case "3071":
+  case "3077":
+    行き先情報.innerText = "高松(タ)→新居浜"+"\\n"+行き先情報.innerText;
+    break;
+  case "3073":
+    行き先情報.innerText = "高松(タ)→松山貨物"+"\\n"+行き先情報.innerText;
+    break;
+  case "70":
+    行き先情報.innerText = "高松(タ)→東京(タ)"+"\\n"+行き先情報.innerText;
+    break;
+  case "74":
+  case "76":
+    行き先情報.innerText = "高松(タ)→大阪(タ)"+"\\n"+行き先情報.innerText;
+    break;
+  case "3078":
+    行き先情報.innerText = "伊予三島→高松(タ)"+"\\n"+行き先情報.innerText;
+    break;
+  case "3070":
+    行き先情報.innerText = "新居浜→高松(タ)"+"\\n"+行き先情報.innerText;
+    break;
+  case "3076":
+    行き先情報.innerText = "新居浜→高松(タ)"+"\\n"+行き先情報.innerText;
+    break;
+  case "3072":
+    行き先情報.innerText = "松山貨物→高松(タ)"+"\\n"+行き先情報.innerText;
+    break;
+  case "9070":
+    行き先情報.innerText = "臨時貨物"+"\\n"+行き先情報.innerText;
+    break;
+  default:
+    JRF = true;
+}
+` + JRF_icon;
+
+  const TKT_name = `
+  //安芸行と併結列車を個別に表示、それ以外をdefaultで下りなら既定の行き先を、上りなら奈半利行を設定
+  switch(列番データ){
+    case "5814D":
+    case "5816D":
+      行き先情報.innerText = "ごめん・なはり線直通\\n快速 奈半利行";
+      break;
+    case "5812D":
+      行き先情報.innerText = "ごめん・なはり線直通\\n快速 安芸行";
+      break;
+    case "5874D":
+    case "5882D":
+      行き先情報.innerText = "ごめん・なはり線直通\\n各停 安芸行";
+      break;
+    case "742D":
+    case "746D":
+      行き先情報.innerText = "土佐山田/奈半利行\\n(後免にて解結)\\nごめん・なはり線快速";
+      break;
+    default:
+      if(new RegExp(/^58[1-3][1,3,5,7,9][DM]$/).test(列番データ)){
+        行き先情報.innerText = "ごめん・なはり線直通\\n快速 "+行き先情報.innerText;
+      }
+      else if(new RegExp(/^58[4-9][1,3,5,7,9][DM]$/).test(列番データ)){
+        行き先情報.innerText = "ごめん・なはり線直通\\n各停 "+行き先情報.innerText;
+      }
+
+      else if(new RegExp(/^58[3-4][0,2,4,6,8][DM]$/).test(列番データ)){
+        行き先情報.innerText = "ごめん・なはり線直通\\n快速 奈半利行";
+      }
+      else if(new RegExp(/^58[5-9][0,2,4,6,8][DM]$/).test(列番データ)){
+        行き先情報.innerText = "ごめん・なはり線直通\\n各停 奈半利行";
+      }
+      break;
+  }
+
+`;
+
+  const textInsert =
+    `
+const setStrings = () =>{
+try {
+var elements = document.querySelectorAll('[onclick]');
+for (let element of elements) {
+  if(element.getAttribute('onclick').indexOf('ShowTrainTimeInfo') == -1) continue;
+  var 行き先情報 = element.getElementsByTagName("p")[0];
+  var 列番データ = element.getAttribute('onclick').split('"')[1];
+  var flag=false;
+  var TrainType = undefined;
+  if(行き先情報.innerText.includes(列番データ))continue; //回避
+  ` +
+    trainIcon +
+    normal_train_name +
+    JRF_name +
+    TKT_name +
+    `
+  //列番付与
+  行き先情報.innerText = 行き先情報.innerText+列番データ+(JRF ? "":"レ");
+}
+try{
+for(let d of document.getElementById('disp').childNodes){
+  switch(d.id){
+    case 'pMENU_2':
+    case 'pMENU_2_En':
+    case 'pMENU_3':
+    case 'pMENU_3_En':
+    case 'pMENU_k':
+    case 'pMENU_k_En':
+      continue;
+    default:
+      break;
+  }
+
+  d.style.width = '100vw';
+  for(let f of d.childNodes){
+    try{
+      if(f.style.alignItems || f.style.textAlign){
+        f.style.width = '38vw';
+      }
+      else{
+        if(f.id == 'upTrainCrossBar'){
+          f.style.width = '38vw';
+        }
+        else if(f.id == 'dwTrainCrossBar'){
+          f.style.left = '62vw';
+          f.style.width = '38vw';
+
+        }
+        else {
+          f.style.width = '0vw';
+        }
+      }
+      if(f.style.textAlign == 'center'){
+        f.style.width = '24vw';
+        f.style.display = 'flex';
+        f.childNodes.forEach(i =>{
+          i.style.width = 'unset';
+          i.style.left = 'unset';
+          i.style.top = 'unset';
+          i.style.position = 'unset';
+          i.style.flex = '1';
+          i.style.margin = '5px'
+
+          if(i.style.backgroundColor != 'rgb(247, 247, 247)'){
+            i.childNodes.forEach(m=> m.style.width = '20vw')
+          }
+        })
+      }
+      
+    }catch(e){}
+  }
+}
+
+
+
+document.querySelector('#pMENU_2').style.borderStyle='solid';
+document.querySelector('#pMENU_2').style.borderColor='#00d3e8';
+document.querySelector('#pMENU_2').style.borderWidth='2px';
+document.querySelector('#pMENU_2').style.borderRadius='10%';
+document.querySelector('#pMENU_3').style.borderStyle='solid';
+document.querySelector('#pMENU_3').style.borderColor='#00d3e8';
+document.querySelector('#pMENU_3').style.borderWidth='2px';
+document.querySelector('#pMENU_3').style.borderRadius='10%';
+document.querySelectorAll('#pMENU_2 div').forEach((d)=>d.style.padding = '10px'); 
+document.querySelectorAll('#pMENU_3 div').forEach((d)=>d.style.padding = '10px'); 
+document.querySelectorAll('#topHeader div').forEach((d)=>d.style.width = '100vw'); 
+document.querySelectorAll('#disp div')[0].style.width = '100vw'; 
+document.getElementById('disp').style.width = '100vw';
+document.getElementById('disp').style.overflowX = 'hidden';
+
+
+  
+}catch(e){
+  alert("にゃーん");
+}
+} catch (e) {}
+//setTimeout(setStrings,500);
+}
+const target = document.getElementById('disp'); // body要素を監視
+const observer = new MutationObserver( (mutations) => {
+// observer.disconnect(); // 監視を終了
+setStrings();
+});
+
+// 監視を開始
+observer.observe(target, {
+  attributes: true, // 属性変化の監視
+  //attributeOldValue: true, // 変化前の属性値を matation.oldValue に格納する
+  //characterData: true, // テキストノードの変化を監視
+  //characterDataOldValue: true, // 変化前のテキストを matation.oldValue に格納する
+  childList: true, // 子ノードの変化を監視
+  //subtree: true // 子孫ノードも監視対象に含める
+});
+`;
+
+  const modal_content = `
+
+const modal_content = document.getElementById('modal_content'); // body要素を監視
+const modal_observer = new MutationObserver( (mutations) => {
+// observer.disconnect(); // 監視を終了
+for(let d of modal_content.getElementsByTagName("button") ){
+  const data = d.onclick.toString().split("\\"")[1];
+  d.onclick = () => window.ReactNativeWebView.postMessage(data)
+}
+});
+
+// 監視を開始
+modal_observer.observe(modal_content, {
+  //attributes: true, // 属性変化の監視
+  //attributeOldValue: true, // 変化前の属性値を matation.oldValue に格納する
+  //characterData: true, // テキストノードの変化を監視
+  //characterDataOldValue: true, // 変化前のテキストを matation.oldValue に格納する
+  childList: true, // 子ノードの変化を監視
+  //subtree: true // 子孫ノードも監視対象に含める
+});
+`;
+
+  return bootData + modal_content + trainIconMaker + textInsert;
+};