DataSourceAccordionCardコンポーネントを追加し、鉄道運用Hubのデータソース設定を改善

- Introduced `stationData.ts` to store station information including names, numbers, and features.
- Created `trainIconMap.ts` for mapping train numbers to their respective image URLs, including dynamic URLs for special trains.
- Added `trainTypeConfig.ts` to define display settings for various train types, including colors and labels for different categories.

GeneralWebView.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from "react";
-import { BackHandler, View, ViewProps } from "react-native";
+import { Alert, BackHandler, View, ViewProps } from "react-native";
 import { WebView } from "react-native-webview";
 import { BigButton } from "./components/atom/BigButton";
 import { useFocusEffect, useNavigation } from "@react-navigation/native";
@@ -33,7 +33,15 @@ export default ({ route }) => {
         source={{ uri }}
         allowsBackForwardNavigationGestures
         ref={webViewRef}
-        onNavigationStateChange={(navState) => setCanGoBack(navState.canGoBack)}
+        onNavigationStateChange={(navState) => {
+          setCanGoBack(navState.canGoBack);
+          if (navState.url === "https://unyohub.2pd.jp/integration/succeeded.php") {
+            goBack();
+            Alert.alert("鉄道運用HUBへの投稿完了", "運用HUBからのこのアプリへのデータ反映には暫く時間がかかりますので、しばらくお待ちください。", [
+              { text: "完了" },
+            ]);
+          }
+        }}
         onMessage={(event) => {
           const { data } = event.nativeEvent;
           const { type } = JSON.parse(data);

components/ActionSheetComponents/EachTrainInfo/EachStopList.tsx

@@ -70,22 +70,22 @@ export const EachStopList: FC<props> = ({
     string
   ]; // 阿波池田,発,6:21,1
   let beforeSameStationData = null;
-  // 運休系でない通常の発のみ、前の着を統合する
-  // 休編（非推奨）は発着が不明なため、次の発と統合する
-  if ((se.includes("発") && !se.includes("休")) || se === "休編") {
+  // 発（通常発・休発・休発編）の場合、前の着（通常着・休着・休着編）と統合する
+  if (se.includes("発")) {
     if (index > 0) {
       const beforeData = array[index - 1].split(",") as [string, seTypes, string];
-      if (beforeData[0] == station) {
+      // 前が着（通常着でも休着でも）の場合は統合
+      if (beforeData[0] == station && beforeData[1].includes("着")) {
         beforeSameStationData = beforeData;
       }
     }
   }
   let afterSameStationData = null;
-  // 運休系でない通常の着のみ、次の発と統合する
-  // 運休着（休着、休着編）は独立して表示する必要がある
-  if (se.includes("着") && !se.includes("休")) {
+  // 着（通常着・休着・休着編）の場合、次の発（通常発・休発・休発編）と統合される（非表示）
+  if (se.includes("着")) {
     const afterData = array[index + 1]?.split(",") as [string, seTypes, string];
-    if (afterData && afterData[0] == station) {
+    // 次が発（通常発でも休発でも）なら、この着を非表示にして次の発で両方表示
+    if (afterData && afterData[0] == station && afterData[1].includes("発")) {
       afterSameStationData = afterData;
       return <></>;
     }

components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx

@@ -19,6 +19,7 @@ import { getStringConfig } from "@/lib/getStringConfig";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { getPDFViewURL } from "@/lib/getPdfViewURL";
 import type { NavigateFunction } from "@/types";
+import { useUnyohub } from "@/stateBox/useUnyohub";
 
 type Props = {
   data: { trainNum: string; limited: string };
@@ -57,6 +58,14 @@ export const HeaderText: FC<Props> = ({
   const { allCustomTrainData, getTodayOperationByTrainId } =
     useAllTrainDiagram();
   const { expoPushToken } = useNotification();
+  const { getUnyohubByTrainNumber, getUnyohubEntriesByTrainNumber, useUnyohub: unyohubEnabled } = useUnyohub();
+
+  // 追加ソースのON/OFFをここで管理（将来ソースが増えたらここに足す）
+  const additionalSources = {
+    unyohub: unyohubEnabled,
+    // exampleSource: exampleEnabled,
+  };
+  const hasAdditionalSources = Object.values(additionalSources).some(Boolean);
 
   // 列車名、種別、フォントの取得
   const [
@@ -68,7 +77,10 @@ export const HeaderText: FC<Props> = ({
     priority,
     uwasa,
     trainInfoUrl,
+    directions,
+    customTrainData,
   ] = useMemo(() => {
+    const result = customTrainDataDetector(trainNum, allCustomTrainData);
     const {
       type,
       train_name,
@@ -78,15 +90,14 @@ export const HeaderText: FC<Props> = ({
       uwasa,
       train_info_url,
       to_data,
-    } = customTrainDataDetector(trainNum, allCustomTrainData);
+      directions,
+    } = result;
     const [typeString, fontAvailable, isOneMan] = getStringConfig(
       type,
       trainNum,
     );
     switch (true) {
       case train_name !== "":
-        // 特急の場合は、列車名を取得
-        // 列番対称データがある場合はそれから列車番号を取得
         return [
           typeString,
           train_name +
@@ -99,6 +110,8 @@ export const HeaderText: FC<Props> = ({
           priority,
           uwasa,
           train_info_url,
+          directions,
+          result,
         ];
       case trainData[trainData.length - 1] === undefined:
         return [
@@ -110,9 +123,10 @@ export const HeaderText: FC<Props> = ({
           priority,
           uwasa,
           train_info_url,
+          directions,
+          result,
         ];
       case to_data && to_data !== "":
-        // 行先がある場合は、行先を取得
         return [
           typeString,
           to_data + "行き",
@@ -122,9 +136,10 @@ export const HeaderText: FC<Props> = ({
           priority,
           uwasa,
           train_info_url,
+          directions,
+          result,
         ];
       default:
-        // 行先がある場合は、行先を取得
         return [
           typeString,
           migrateTrainName(
@@ -136,6 +151,8 @@ export const HeaderText: FC<Props> = ({
           priority,
           uwasa,
           train_info_url,
+          directions,
+          result,
         ];
     }
   }, [trainData]);
@@ -143,6 +160,19 @@ export const HeaderText: FC<Props> = ({
   const todayOperation = getTodayOperationByTrainId(trainNum).filter(
     (d) => d.state !== 100,
   );
+
+  let iconTrainDirection =
+    parseInt(trainNum.replace(/[^\d]/g, "")) % 2 == 0 ? true : false;
+  if (directions != undefined) {
+    iconTrainDirection = directions ? true : false;
+  }
+
+  const unyohubFormation = getUnyohubByTrainNumber(trainNum);
+  const unyohubEntries = getUnyohubEntriesByTrainNumber(trainNum);
+
+  const hasExtraInfo =
+    priority > 200 || todayOperation?.length > 0 || !!unyohubFormation;
+
   return (
     <View
       style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
@@ -155,6 +185,7 @@ export const HeaderText: FC<Props> = ({
         navigate={navigate}
         from={from}
         todayOperation={todayOperation}
+        direction={iconTrainDirection}
       />
       <TouchableOpacity
         style={{
@@ -229,15 +260,33 @@ export const HeaderText: FC<Props> = ({
       </TouchableOpacity>
       <MaterialCommunityIcons
         name="database"
-        color={
-          priority > 200 || todayOperation?.length > 0 ? "yellow" : "white"
-        }
+        color={hasExtraInfo ? "yellow" : "white"}
         size={30}
         style={{ margin: 5 }}
         onPress={() => {
-          const uri = `https://jr-shikoku-data-system.pages.dev/trainData/${trainNum}?userID=${expoPushToken}&from=eachTrainInfo`;
-          navigate("generalWebView", { uri, useExitButton: false });
-          SheetManager.hide("EachTrainInfo");
+          if (hasAdditionalSources) {
+            (SheetManager.show as any)("TrainDataSources", {
+              payload: {
+                trainNum,
+                unyohubEntries,
+                todayOperation,
+                navigate,
+                expoPushToken,
+                priority,
+                direction: iconTrainDirection,
+                customTrainData,
+                typeName,
+                trainName,
+                departureStation: trainData[0]?.split(",")[0] ?? "",
+                destinationStation: trainData[trainData.length - 1]?.split(",")[0] ?? "",
+              },
+            });
+          } else {
+            // 追加ソースが全てオフ → 元の挙動（直接 DB ページを開く）
+            const uri = `https://jr-shikoku-data-system.pages.dev/trainData/${trainNum}?userID=${expoPushToken}&from=eachTrainInfo`;
+            navigate("generalWebView", { uri, useExitButton: false });
+            SheetManager.hide("EachTrainInfo");
+          }
         }}
       />
     </View>

components/ActionSheetComponents/EachTrainInfoCore/TrainSourcesPanel.tsx

@@ -0,0 +1,539 @@
+import React, { FC, useMemo } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  Image,
+} from "react-native";
+import { MaterialCommunityIcons, Ionicons } from "@expo/vector-icons";
+import { SheetManager } from "react-native-actions-sheet";
+import type { NavigateFunction } from "@/types";
+import type { OperationLogs } from "@/lib/CommonTypes";
+import type { UnyohubData } from "@/types/unyohub";
+
+const HUB_LOGO_PNG = require("@/assets/icons/hub_logo.png");
+
+type Props = {
+  trainNum: string;
+  unyohubEntries: UnyohubData[];
+  todayOperation: OperationLogs[];
+  navigate: NavigateFunction;
+  expoPushToken: string;
+  onClose: () => void;
+  /** true = 上り (vehicle_img) / false = 下り (vehicle_img_right) */
+  direction: boolean;
+};
+
+/** 情報ソース別カードを並べて表示するパネル */
+export const TrainSourcesPanel: FC<Props> = ({
+  trainNum,
+  unyohubEntries,
+  todayOperation,
+  navigate,
+  expoPushToken,
+  onClose,
+  direction,
+}) => {
+  // 連結番号（train_ids のカンマ後数値）で昇順ソート
+  const sortedTodayOperation = useMemo(() => {
+    const extractOrder = (trainId: string): number => {
+      const parts = trainId.split(",");
+      if (parts.length > 1) {
+        const n = parseInt(parts[1].trim(), 10);
+        return isNaN(n) ? Infinity : n;
+      }
+      return Infinity;
+    };
+    const findId = (op: OperationLogs): string | null => {
+      for (const id of [...(op.train_ids ?? []), ...(op.related_train_ids ?? [])]) {
+        if (id.split(",")[0] === trainNum) return id;
+      }
+      return null;
+    };
+    return [...todayOperation].sort((a, b) => {
+      const aId = findId(a);
+      const bId = findId(b);
+      if (!aId || !bId) return aId ? -1 : bId ? 1 : 0;
+      return extractOrder(aId) - extractOrder(bId);
+    });
+  }, [todayOperation, trainNum]);
+
+  return (
+    <View style={styles.container}>
+      {/* ヘッダー */}
+      <View style={styles.panelHeader}>
+        <Text style={styles.panelHeaderText}>運用情報ソース</Text>
+        <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+          <Ionicons name="close" size={20} color="#0099CC" />
+        </TouchableOpacity>
+      </View>
+
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* ──────────────────────────────────────── */}
+        {/* JR四国データベース（常に表示）            */}
+        {/* ──────────────────────────────────────── */}
+        <SourceCard
+          iconName="database"
+          iconColor="#0099CC"
+          tag="公式"
+          tagColor="#0099CC"
+          title="JR四国データベース"
+          description="コミュニティが管理する列車データ。編成・運用の詳細を確認・編集できます。"
+          available
+          onPress={() => {
+            const uri = `https://jr-shikoku-data-system.pages.dev/trainData/${trainNum}?userID=${expoPushToken}&from=eachTrainInfo`;
+            navigate("generalWebView", { uri, useExitButton: false });
+            SheetManager.hide("EachTrainInfo");
+            onClose();
+          }}
+        />
+
+        {/* ──────────────────────────────────────── */}
+        {/* 鉄道運用Hub                              */}
+        {/* ──────────────────────────────────────── */}
+        {unyohubEntries.length > 0 ? (
+          <>
+            <SectionLabel label="鉄道運用Hub" imagePng={HUB_LOGO_PNG} />
+            {unyohubEntries.map((entry, i) => (
+              <UnyohubCard key={`unyo-${i}`} entry={entry} trainNum={trainNum} navigate={navigate} onClose={onClose} />
+            ))}
+          </>
+        ) : (
+          <SourceCard
+            iconImagePng={HUB_LOGO_PNG}
+            iconColor="#333"
+            tag="運用Hub"
+            tagColor="#555"
+            title="鉄道運用Hub"
+            description="この列車の運用データはありません。"
+            available={false}
+          />
+        )}
+
+        {/* ──────────────────────────────────────── */}
+        {/* 今日の運用情報                            */}
+        {/* ──────────────────────────────────────── */}
+        {sortedTodayOperation.length > 0 ? (
+          <>
+            <SectionLabel label="今日の運用情報" icon="history" />
+            <DirectionBanner direction={direction} />
+            {sortedTodayOperation.map((op, i) => (
+              <OperationCard
+                key={`op-${i}`}
+                op={op}
+                index={i}
+                direction={direction}
+                navigate={navigate}
+                onClose={onClose}
+              />
+            ))}
+          </>
+        ) : (
+          <SourceCard
+            iconName="history"
+            iconColor="#aaa"
+            tag="記録"
+            tagColor="#aaa"
+            title="今日の運用情報"
+            description="本日の運用記録はありません。"
+            available={false}
+          />
+        )}
+      </ScrollView>
+    </View>
+  );
+};
+
+/* ------------------------------------------------------------------ */
+/* サブコンポーネント                                                    */
+/* ------------------------------------------------------------------ */
+
+/** セクションラベル */
+const SectionLabel: FC<{ label: string; icon?: string; imagePng?: any }> = ({ label, icon, imagePng }) => (
+  <View style={styles.sectionLabel}>
+    {imagePng ? (
+      <Image source={imagePng} style={{ width: 14, height: 14 }} />
+    ) : (
+      <MaterialCommunityIcons name={(icon ?? "information") as any} size={14} color="#888" />
+    )}
+    <Text style={styles.sectionLabelText}>{label}</Text>
+  </View>
+);
+
+/** 汎用ソースカード */
+const SourceCard: FC<{
+  iconName?: string;
+  iconImagePng?: any;
+  iconColor: string;
+  tag: string;
+  tagColor: string;
+  title: string;
+  description: string;
+  available: boolean;
+  onPress?: () => void;
+}> = ({ iconName, iconImagePng, iconColor, tag, tagColor, title, description, available, onPress }) => (
+  <TouchableOpacity
+    style={[styles.card, !available && styles.cardDisabled]}
+    onPress={available ? onPress : undefined}
+    activeOpacity={available ? 0.7 : 1}
+  >
+    <View style={[styles.cardIconWrap, { backgroundColor: iconColor + "22" }]}>
+      {iconImagePng ? (
+        <Image source={iconImagePng} style={{ width: 24, height: 24 }} />
+      ) : (
+        <MaterialCommunityIcons name={(iconName ?? "information") as any} size={22} color={iconColor} />
+      )}
+    </View>
+    <View style={styles.cardBody}>
+      <View style={styles.cardTitleRow}>
+        <Text style={[styles.cardTitle, !available && styles.cardTitleDisabled]}>{title}</Text>
+        <View style={[styles.tag, { backgroundColor: tagColor + "33" }]}>
+          <Text style={[styles.tagText, { color: tagColor }]}>{tag}</Text>
+        </View>
+      </View>
+      <Text style={styles.cardDesc}>{description}</Text>
+    </View>
+    {available && (
+      <MaterialCommunityIcons name="chevron-right" size={18} color="#ccc" />
+    )}
+  </TouchableOpacity>
+);
+
+/** 鉄道運用Hubカード（1編成分） */
+const UnyohubCard: FC<{
+  entry: UnyohubData;
+  trainNum: string;
+  navigate: NavigateFunction;
+  onClose: () => void;
+}> = ({ entry, trainNum, navigate, onClose }) => {
+  const matchedTrain = entry.trains?.find((t) => t.train_number === trainNum);
+  const positionText = matchedTrain
+    ? `位置: ${matchedTrain.position_forward}〜${matchedTrain.position_rear}両目`
+    : null;
+  const carInfo = `${entry.car_count}両 (${entry.min_car_count}〜${entry.max_car_count}両)`;
+  const timeInfo =
+    entry.starting_time && entry.ending_time
+      ? `${entry.starting_time} → ${entry.ending_time}`
+      : null;
+
+  return (
+    <TouchableOpacity
+      style={styles.card}
+      activeOpacity={0.7}
+      onPress={() => {
+        // 編成番号+列番でページを開く（将来的にunyohub公式ページへの対応も想定）
+        const uri = `https://jr-shikoku-data-system.pages.dev/trainData/${trainNum}?formation=${encodeURIComponent(entry.formations)}&source=unyohub`;
+        navigate("generalWebView", { uri, useExitButton: true });
+        SheetManager.hide("EachTrainInfo");
+        onClose();
+      }}
+    >
+      {/* 編成色インジケーター */}
+      <View
+        style={[
+          styles.cardIconWrap,
+          { backgroundColor: "#33333318" },
+        ]}
+      >
+        <Image source={HUB_LOGO_PNG} style={{ width: 24, height: 24 }} />
+      </View>
+      <View style={styles.cardBody}>
+        <View style={styles.cardTitleRow}>
+          <Text style={styles.cardTitle}>{entry.formations}</Text>
+          <View style={[styles.tag, { backgroundColor: "#FF980033" }]}>
+            <Text style={[styles.tagText, { color: "#FF9800" }]}>運用Hub</Text>
+          </View>
+          {entry.from_beginner && (
+            <View style={[styles.tag, { backgroundColor: "#9C27B033" }]}>
+              <Text style={[styles.tagText, { color: "#9C27B0" }]}>初心者</Text>
+            </View>
+          )}
+        </View>
+
+        {/* 詳細行 */}
+        <View style={styles.unyoDetailRow}>
+          {positionText && (
+            <DetailChip icon="seat" text={positionText} />
+          )}
+          <DetailChip icon="train-car" text={carInfo} />
+          {timeInfo && <DetailChip icon="clock-outline" text={timeInfo} />}
+          {entry.starting_location && (
+            <DetailChip icon="map-marker" text={entry.starting_location} />
+          )}
+        </View>
+
+        {entry.comment && (
+          <Text style={styles.unyoComment}>{entry.comment}</Text>
+        )}
+
+        <View style={styles.postsRow}>
+          <MaterialCommunityIcons name="account-group" size={12} color="#888" />
+          <Text style={styles.postsText}>{entry.posts_count}件の投稿</Text>
+        </View>
+      </View>
+      <MaterialCommunityIcons name="chevron-right" size={18} color="#ccc" />
+    </TouchableOpacity>
+  );
+};
+
+/** 進行方向バナー */
+const DirectionBanner: FC<{ direction: boolean }> = ({ direction }) => (
+  <View style={styles.directionBanner}>
+    {direction ? (
+      // 上り：矢印は左向き（← 先頭）
+      <>
+        <MaterialCommunityIcons name="arrow-left" size={14} color="#0099CC" />
+        <Text style={styles.directionText}>進行方向（上り）</Text>
+      </>
+    ) : (
+      // 下り：矢印は右向き（先頭 →）
+      <>
+        <Text style={styles.directionText}>進行方向（下り）</Text>
+        <MaterialCommunityIcons name="arrow-right" size={14} color="#0099CC" />
+      </>
+    )}
+  </View>
+);
+
+/** 今日の運用情報カード */
+const OperationCard: FC<{
+  op: OperationLogs;
+  index: number;
+  direction: boolean;
+  navigate: NavigateFunction;
+  onClose: () => void;
+}> = ({ op, index, direction, navigate, onClose }) => {
+  // 進行方向に応じて車両画像を選択（trainIconStatus.tsx と同ロジック）
+  const thumbUri = direction
+    ? (op.vehicle_img || op.vehicle_img_right)
+    : (op.vehicle_img_right || op.vehicle_img);
+  const hasUrl = !!op.vehicle_info_url;
+  const trainIds = [...(op.train_ids || []), ...(op.related_train_ids || [])];
+
+  return (
+    <TouchableOpacity
+      style={[styles.card, !hasUrl && styles.cardNoArrow]}
+      activeOpacity={hasUrl ? 0.7 : 1}
+      onPress={
+        hasUrl
+          ? () => {
+              navigate("howto", { info: op.vehicle_info_url, goTo: "menu" });
+              SheetManager.hide("EachTrainInfo");
+              onClose();
+            }
+          : undefined
+      }
+    >
+      {/* 車両サムネイル or アイコン（進行方向考慮） */}
+      {thumbUri ? (
+        <Image
+          source={{ uri: thumbUri }}
+          style={styles.vehicleThumb}
+          resizeMode="contain"
+        />
+      ) : (
+        <View style={[styles.cardIconWrap, { backgroundColor: "#4CAF5022" }]}>
+          <MaterialCommunityIcons name="train" size={22} color="#4CAF50" />
+        </View>
+      )}
+
+      <View style={styles.cardBody}>
+        <View style={styles.cardTitleRow}>
+          <Text style={styles.cardTitle}>運用記録 #{index + 1}</Text>
+          <View style={[styles.tag, { backgroundColor: "#4CAF5033" }]}>
+            <Text style={[styles.tagText, { color: "#4CAF50" }]}>記録</Text>
+          </View>
+        </View>
+        {trainIds.length > 0 && (
+          <Text style={styles.cardDesc} numberOfLines={1}>
+            列番: {trainIds.slice(0, 4).join(" / ")}
+            {trainIds.length > 4 ? " ..." : ""}
+          </Text>
+        )}
+        {op.date && (
+          <Text style={styles.cardDesc}>日付: {op.date}</Text>
+        )}
+      </View>
+      {hasUrl && (
+        <MaterialCommunityIcons name="chevron-right" size={18} color="#ccc" />
+      )}
+    </TouchableOpacity>
+  );
+};
+
+/** 小さい詳細チップ */
+const DetailChip: FC<{ icon: string; text: string }> = ({ icon, text }) => (
+  <View style={styles.chip}>
+    <MaterialCommunityIcons name={icon as any} size={11} color="#666" />
+    <Text style={styles.chipText}>{text}</Text>
+  </View>
+);
+
+/* ------------------------------------------------------------------ */
+/* スタイル                                                              */
+/* ------------------------------------------------------------------ */
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "#fff",
+    borderTopWidth: 1,
+    borderTopColor: "#e0e0e0",
+  },
+  panelHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: "#f0f0f0",
+  },
+  panelHeaderText: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: "bold",
+    color: "#333",
+  },
+  closeButton: {
+    padding: 4,
+  },
+  scroll: {
+    maxHeight: 360,
+  },
+  scrollContent: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    paddingBottom: 16,
+  },
+  sectionLabel: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: 10,
+    marginBottom: 4,
+    gap: 4,
+  },
+  sectionLabelText: {
+    fontSize: 12,
+    color: "#888",
+    fontWeight: "600",
+    letterSpacing: 0.5,
+  },
+  card: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#f9f9f9",
+    borderRadius: 10,
+    marginBottom: 8,
+    padding: 10,
+    borderWidth: 1,
+    borderColor: "#eeeeee",
+    gap: 10,
+  },
+  cardDisabled: {
+    opacity: 0.5,
+  },
+  cardNoArrow: {
+    // no change needed
+  },
+  cardIconWrap: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  vehicleThumb: {
+    width: 50,
+    height: 40,
+    borderRadius: 6,
+    flexShrink: 0,
+    backgroundColor: "#eee",
+  },
+  cardBody: {
+    flex: 1,
+    gap: 3,
+  },
+  cardTitleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    flexWrap: "wrap",
+  },
+  cardTitle: {
+    fontSize: 14,
+    fontWeight: "bold",
+    color: "#222",
+  },
+  cardTitleDisabled: {
+    color: "#aaa",
+  },
+  cardDesc: {
+    fontSize: 12,
+    color: "#666",
+  },
+  tag: {
+    borderRadius: 4,
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+  },
+  tagText: {
+    fontSize: 10,
+    fontWeight: "bold",
+  },
+  unyoDetailRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 4,
+    marginTop: 2,
+  },
+  unyoComment: {
+    fontSize: 11,
+    color: "#888",
+    fontStyle: "italic",
+    marginTop: 2,
+  },
+  postsRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 3,
+    marginTop: 2,
+  },
+  postsText: {
+    fontSize: 11,
+    color: "#888",
+  },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#f0f0f0",
+    borderRadius: 4,
+    paddingHorizontal: 5,
+    paddingVertical: 2,
+    gap: 3,
+  },
+  chipText: {
+    fontSize: 11,
+    color: "#555",
+  },
+  directionBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: "#E3F4FB",
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    marginBottom: 6,
+    alignSelf: "flex-start",
+  },
+  directionText: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: "#0099CC",
+  },
+});

components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx

@@ -17,17 +17,18 @@ type Props = {
   navigate: NavigateFunction;
   from: string;
   todayOperation: OperationLogs[];
+  direction?: boolean;
 };
 type apt = {
   name: GlyphNames;
   color: string;
 };
 export const TrainIconStatus: FC<Props> = (props) => {
-  const { data, navigate, from, todayOperation } = props;
+  const { data, navigate, from, todayOperation, direction } = props;
   const [anpanmanStatus, setAnpanmanStatus] = useState<apt>();
   const { allCustomTrainData } = useAllTrainDiagram();
   const [trainIconData, setTrainIcon] = useState<
-    { vehicle_info_img: string; vehicle_info_url: string }[]
+    { vehicle_info_img: string;vehicle_info_right_img: string; vehicle_info_url: string }[]
   >([]);
   useEffect(() => {
     if (!data.trainNum) return;
@@ -79,11 +80,12 @@ export const TrainIconStatus: FC<Props> = (props) => {
           })
           .map((op) => ({
             vehicle_info_img: op.vehicle_img || vehicle_info_img,
+            vehicle_info_right_img: op.vehicle_img_right ||  op.vehicle_img || vehicle_info_img,
             vehicle_info_url: op.vehicle_info_url,
           })) || [];
       setTrainIcon(returnData);
     } else if (vehicle_info_img) {
-      setTrainIcon([{ vehicle_info_img, vehicle_info_url }]);
+      setTrainIcon([{ vehicle_info_img, vehicle_info_right_img: vehicle_info_img, vehicle_info_url }]);
     }
 
     switch (data.trainNum) {
@@ -113,30 +115,6 @@ export const TrainIconStatus: FC<Props> = (props) => {
             }
           });
         break;
-      case "2074D":
-      case "2076D":
-      case "2080D":
-      case "2082D":
-      case "2071D":
-      case "2073D":
-      case "2079D":
-      case "2081D":
-        fetch(
-          `https://n8n.haruk.in/webhook/dosan-anpanman-first?trainNum=${
-            data.trainNum
-          }&month=${dayjs().format("M")}&day=${dayjs().format("D")}`
-        )
-          .then((d) => d.json())
-          .then((d) => {
-            if (d.trainStatus == "〇") {
-              //setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"});
-            } else if (d.trainStatus == "▲") {
-              setAnpanmanStatus({ name: "warning-outline", color: "yellow" });
-            } else if (d.trainStatus == "×") {
-              //setAnpanmanStatus({ name: "close-circle-outline", color: "red" });
-            }
-          });
-        break;
     }
   }, [data.trainNum, allCustomTrainData, todayOperation]);
   const [move, setMove] = useState(true);
@@ -151,7 +129,7 @@ export const TrainIconStatus: FC<Props> = (props) => {
   return (
     <>
       {trainIconData.map(
-        ({ vehicle_info_img: trainIcon, vehicle_info_url: address }, index) => (
+        ({ vehicle_info_img: trainIcon, vehicle_info_right_img: trainIconRight, vehicle_info_url: address }, index) => (
           <TouchableOpacity
             onPress={() => {
               navigate("howto", {
@@ -164,7 +142,7 @@ export const TrainIconStatus: FC<Props> = (props) => {
           >
             {move ? (
               <Image
-                source={{ uri: trainIcon }}
+                source={{ uri: direction ? trainIcon : trainIconRight || trainIcon }}
                 style={{
                   height: index > 0 ? 15 : 30,
                   width: index > 0 ? 12 : 24,

components/ActionSheetComponents/TrainDataSources.tsx

@@ -0,0 +1,739 @@
+import React, { FC } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  Platform,
+  Image,
+} from "react-native";
+import ActionSheet, { SheetManager } from "react-native-actions-sheet";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import type { NavigateFunction } from "@/types";
+import type { OperationLogs, CustomTrainData } from "@/lib/CommonTypes";
+import type { UnyohubData } from "@/types/unyohub";
+
+export type TrainDataSourcesPayload = {
+  trainNum: string;
+  unyohubEntries: UnyohubData[];
+  todayOperation: OperationLogs[];
+  navigate: NavigateFunction;
+  expoPushToken: string;
+  /** customTrainDataDetector から取得した priority 値 */
+  priority: number;
+  /** 進行方向: true = 上り (vehicle_img) / false = 下り (vehicle_img_right)
+   * 未指定の場合は列番の奇数偶数でフォールバック */
+  direction?: boolean;
+  /** customTrainDataDetector の全データ */
+  customTrainData?: CustomTrainData;
+  /** 種別名 (e.g. "特急") */
+  typeName?: string;
+  /** 列車名・行先 (e.g. "モーニングEXP高松 高松行") */
+  trainName?: string;
+  /** 始発駅名 */
+  departureStation?: string;
+  /** 終着駅名（ダイヤから） */
+  destinationStation?: string;
+};
+
+const HUB_LOGO_PNG = require("@/assets/icons/hub_logo.png");
+
+export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
+  payload,
+}) => {
+  if (!payload) return null;
+
+  const { trainNum, unyohubEntries, todayOperation, navigate, expoPushToken, priority, direction: directionProp, customTrainData, typeName, trainName, departureStation, destinationStation } =
+    payload;
+
+  // 進行方向の確定:
+  // 1. payload.direction が明示されていればそれを使う
+  // 2. customTrainData.directions が設定されていればそれを使う
+  // 3. どちらもなければ列番の偶数 = 上り / 奇数 = 下り でフォールバック
+  const resolvedDirection: boolean = (() => {
+    if (directionProp !== undefined) return directionProp;
+    if (customTrainData?.directions !== undefined) return !!customTrainData.directions;
+    return parseInt(trainNum.replace(/[^\d]/g, ""), 10) % 2 === 0;
+  })();
+
+  const close = () => SheetManager.hide("TrainDataSources");
+
+  const openWebView = (uri: string, useExitButton: boolean) => {
+    SheetManager.hide("EachTrainInfo");
+    SheetManager.hide("TrainDataSources");
+    navigate("generalWebView", { uri, useExitButton });
+  };
+
+  /* ── 各ソースの状態 ─────────────────────────────── */
+  const opCount = todayOperation.length;
+  const unyoCount = unyohubEntries.length;
+  const hasTrainInfo = priority > 200;
+
+  // 運用情報: 全エントリの unit_ids をフラットに収集・重複除去
+  const allUnitIds = [
+    ...new Set(todayOperation.flatMap((op) => op.unit_ids ?? [])),
+  ];
+  const fallbackIds = todayOperation.flatMap((op) => op.train_ids ?? []).slice(0, 4);
+  const unitIdsSub = allUnitIds.length > 0
+    ? null
+    : opCount > 0
+    ? fallbackIds.join("・") || "運用記録あり"
+    : "本日の運用記録なし";
+
+  const operationDetail = opCount > 0 ? (
+    <View style={styles.operationDetailBlock}>
+      {allUnitIds.length > 0 ? (
+        <Text style={styles.unitIdText}>
+          {allUnitIds.slice(0, 8).join("・")}{allUnitIds.length > 8 ? `他${allUnitIds.length - 8}件` : ""}
+        </Text>
+      ) : (
+        <Text style={styles.subText}>{fallbackIds.join("・") || "運用記録あり"}</Text>
+      )}
+      <DirectionBanner direction={resolvedDirection} />
+    </View>
+  ) : null;
+
+  // 鉄道運用Hub: 編成名リスト
+  const formationNames =
+    unyohubEntries
+      .slice(0, 4)
+      .map((e) => e.formations)
+      .join("・") + (unyoCount > 4 ? ` 他${unyoCount - 4}件` : "");
+
+  const formationDetail = unyoCount > 0 ? (
+    <Text style={styles.unitIdText}>
+      {formationNames}
+    </Text>
+  ) : null;
+
+  // 列車情報 subテキスト
+  const trainInfoSub = customTrainData?.vehicle_formation
+    ? customTrainData.vehicle_formation
+    : hasTrainInfo
+    ? "臨時情報あり / コミュニティ樓所データを確認・編集"
+    : "編成データ・コミュニティ独自データを確認・編集";
+
+  const trainDetail = customTrainData ? (
+    <TrainInfoDetail
+      data={customTrainData}
+      typeName={typeName}
+      trainName={trainName}
+      departureStation={departureStation}
+      destinationStation={destinationStation}
+    />
+  ) : null;
+
+  return (
+    <ActionSheet
+      gestureEnabled
+      CustomHeaderComponent={<></>}
+      isModal={Platform.OS === "ios"}
+    >
+      {/* ヘッダー */}
+      <View style={styles.header}>
+        <View style={styles.handleBar} />
+        <View style={styles.headerRow}>
+          <Text style={styles.headerTitle}>運用情報ソース</Text>
+          <Text style={styles.headerSub}>{trainNum}</Text>
+        </View>
+      </View>
+
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {/* ─── jr-shikoku-data-system (列車情報 + 運用情報) ─── */}
+        <CombinedCard
+          rows={[
+            {
+              icon: "database-search",
+              title: "列車情報",
+              sub: null,
+              badge: hasTrainInfo ? "!" : null,
+              detail: trainDetail,
+            },
+            {
+              icon: "calendar-clock",
+              title: "運用情報",
+              sub: unitIdsSub,
+              badge: opCount > 0 ? opCount : null,
+              detail: operationDetail,
+            },
+          ]}
+          color="#0099CC"
+          label="jr-shikoku-data-system"
+          onPress={() =>
+            openWebView(
+              `https://jr-shikoku-data-system.pages.dev/trainData/${trainNum}?userID=${expoPushToken}&from=eachTrainInfo`,
+              false
+            )
+          }
+        />
+
+        {/* ─── 鉄道運用Hub ─────────────────────────── */}
+        <SourceCard
+          imagePng={HUB_LOGO_PNG}
+          color="#333"
+          title="鉄道運用Hub"
+          label="外部コミュニティデータ"
+          sub={unyoCount > 0 ? "" : "運用データなし / 新規投稿もここから"}
+          badge={unyoCount > 0 ? unyoCount : null}
+          badgeColor="#333"
+          detail={formationDetail}
+          onPress={() =>
+            openWebView(
+              `https://jr-shikoku-data-system.pages.dev/unyohub-connection-train-data/${trainNum}`,
+              true
+            )
+          }
+        />
+      </ScrollView>
+
+      <View style={styles.footer} />
+    </ActionSheet>
+  );
+};
+
+/* ------------------------------------------------------------------ */
+/* DirectionBanner: 進行方向表示                                        */
+/* ------------------------------------------------------------------ */
+const DirectionBanner: FC<{ direction: boolean }> = ({ direction }) => (
+  <View style={styles.directionBanner}>
+    {direction ? (
+      <>
+        <MaterialCommunityIcons name="arrow-left" size={13} color="#0099CC" />
+        <Text style={styles.directionText}>進行方向（上り）</Text>
+      </>
+    ) : (
+      <>
+        <Text style={styles.directionText}>進行方向（下り）</Text>
+        <MaterialCommunityIcons name="arrow-right" size={13} color="#0099CC" />
+      </>
+    )}
+  </View>
+);
+
+/* ------------------------------------------------------------------ */
+/* CombinedCard: 複数行を 1 枠にまとめるカード                         */
+/* ------------------------------------------------------------------ */
+type CombinedRow = {
+  icon: string;
+  title: string;
+  sub: string | null;
+  badge: number | string | null;
+  detail?: React.ReactNode;
+};
+
+const CombinedCard: FC<{
+  rows: CombinedRow[];
+  color: string;
+  label: string;
+  onPress: () => void;
+}> = ({ rows, color, label, onPress }) => (
+  <TouchableOpacity style={[styles.card, styles.combinedCard]} activeOpacity={0.7} onPress={onPress}>
+    {/* 共通ヘッダー */}
+    <View style={styles.combinedHeader}>
+      <View style={[styles.colorBar, { backgroundColor: color }]} />
+      <Text style={[styles.labelText, styles.combinedLabel]}>{label}</Text>
+    </View>
+    {/* 各行 */}
+    {rows.map((row, i) => (
+      <React.Fragment key={row.title}>
+        {i > 0 && <View style={[styles.divider, { marginLeft: 14 }]} />}
+        <View style={styles.combinedRow}>
+          {/* 左カラーバー分のスペーサー */}
+          <View style={{ width: 4 }} />
+          <View style={[styles.iconWrap, { backgroundColor: color + "18", marginTop: 6 }]}>
+            <MaterialCommunityIcons name={row.icon as any} size={22} color={color} />
+          </View>
+          <View style={styles.textWrap}>
+            <View style={styles.titleRow}>
+              <Text style={styles.cardTitle}>{row.title}</Text>
+              {row.badge !== null && (
+                <View style={[styles.badge, { backgroundColor: color }]}>
+                  <Text style={styles.badgeText}>{row.badge}</Text>
+                </View>
+              )}
+            </View>
+            {row.sub !== null && (
+              <Text style={styles.subText} numberOfLines={1}>{row.sub}</Text>
+            )}
+            {row.detail && (
+              <View style={styles.detailWrap}>{row.detail}</View>
+            )}
+          </View>
+          {i === rows.length - 1 && (
+            <MaterialCommunityIcons name="chevron-right" size={20} color="#ccc" style={{ marginRight: 10, marginTop: 16 }} />
+          )}
+        </View>
+      </React.Fragment>
+    ))}
+  </TouchableOpacity>
+);
+
+/* ------------------------------------------------------------------ */
+/* TrainInfoDetail: 列車情報の構造化表示                              */
+/* ------------------------------------------------------------------ */
+const TrainInfoDetail: FC<{
+  data: CustomTrainData;
+  typeName?: string;
+  trainName?: string;
+  departureStation?: string;
+  destinationStation?: string;
+}> = ({ data, typeName, trainName, departureStation, destinationStation }) => {
+  const { infogram, train_info, vehicle_formation, via_data, start_date, end_date, uwasa, optional_text } = data;
+  // to_data がなければダイヤの終着駅をフォールバック
+  const destDisplay = data.to_data || destinationStation || "";
+  const hasAny = typeName || trainName || departureStation || destDisplay || infogram || train_info || vehicle_formation || via_data || start_date || end_date || uwasa || optional_text;
+  if (!hasAny) return null;
+
+  return (
+    <View style={styles.trainDetail}>
+      {/* 種別・列車名・始発→行先 */}
+      {(typeName || trainName || departureStation || destDisplay) && (
+        <View style={styles.trainTitleBlock}>
+          <View style={styles.trainHeaderRow}>
+            {!!typeName && (
+              <View style={styles.typeTag}>
+                <Text style={styles.typeTagText}>{typeName}</Text>
+              </View>
+            )}
+            {!!trainName && (
+              <Text style={styles.trainNameText} numberOfLines={1}>{trainName}</Text>
+            )}
+          </View>
+          {!!(departureStation || destDisplay) && (
+            <View style={styles.routeRow}>
+              {!!departureStation && (
+                <Text style={styles.routeStation}>{departureStation}</Text>
+              )}
+              {!!(departureStation && destDisplay) && (
+                <MaterialCommunityIcons name="arrow-right" size={13} color="#aaa" />
+              )}
+              {!!destDisplay && (
+                <Text style={[styles.routeStation, styles.routeDest]}>{destDisplay}</Text>
+              )}
+            </View>
+          )}
+        </View>
+      )}
+      {/* LED インフォグラム */}
+      {!!infogram && (
+        <View style={styles.ledSection}>
+          <Text style={styles.detailSectionLabel}>インフォグラム</Text>
+          <View style={styles.ledDisplay}>
+            <Text style={styles.ledText}>{infogram}</Text>
+          </View>
+        </View>
+      )}
+
+      {/* 列車情報テキスト */}
+      {!!train_info && (
+        <View style={styles.trainInfoSection}>
+          <Text style={styles.detailSectionLabel}>列車情報</Text>
+          <Text style={styles.trainInfoText}>{train_info}</Text>
+        </View>
+      )}
+
+      {/* メタ情報チップ行 */}
+      {!!(vehicle_formation || via_data || start_date || end_date) && (
+        <View style={styles.metaChipRow}>
+          {!!vehicle_formation && (
+            <View style={styles.metaChip}>
+              <MaterialCommunityIcons name="train-car" size={11} color="#444" />
+              <Text style={styles.metaChipText}>{vehicle_formation}</Text>
+            </View>
+          )}
+          {!!via_data && (
+            <View style={styles.metaChip}>
+              <MaterialCommunityIcons name="map-marker-path" size={11} color="#444" />
+              <Text style={styles.metaChipText}>経由: {via_data}</Text>
+            </View>
+          )}
+          {!!(start_date || end_date) && (
+            <View style={[styles.metaChip, styles.metaChipOrange]}>
+              <MaterialCommunityIcons name="calendar-range" size={11} color="#bf360c" />
+              <Text style={[styles.metaChipText, { color: "#bf360c" }]}>
+                {start_date ?? ""}〜{end_date ?? ""}
+              </Text>
+            </View>
+          )}
+        </View>
+      )}
+
+      {/* うわさ / optional_text */}
+      {(!!uwasa || !!optional_text) && (
+        <View style={styles.noteSection}>
+          {!!uwasa && (
+            <View style={styles.noteRow}>
+              <MaterialCommunityIcons name="message-text-outline" size={12} color="#888" />
+              <Text style={styles.noteText}>{uwasa}</Text>
+            </View>
+          )}
+          {!!optional_text && (
+            <View style={styles.noteRow}>
+              <MaterialCommunityIcons name="information-outline" size={12} color="#888" />
+              <Text style={styles.noteText}>{optional_text}</Text>
+            </View>
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+/* ------------------------------------------------------------------ */
+/* SourceCard                                                           */
+/* ------------------------------------------------------------------ */
+type SourceCardProps = {
+  icon?: string;
+  imagePng?: any;
+  color: string;
+  title: string;
+  label: string;
+  sub?: string;
+  badge: number | string | null;
+  badgeColor: string;
+  onPress?: () => void;
+  detail?: React.ReactNode;
+};
+
+const SourceCard: FC<SourceCardProps> = ({
+  icon,
+  imagePng,
+  color,
+  title,
+  label,
+  sub,
+  badge,
+  badgeColor,
+  onPress,
+  detail,
+}) => (
+  <TouchableOpacity
+    style={styles.card}
+    activeOpacity={0.7}
+    onPress={onPress}
+  >
+    {/* 左カラーバー */}
+    <View style={[styles.colorBar, { backgroundColor: color }]} />
+
+    {/* アイコン */}
+    <View style={[styles.iconWrap, { backgroundColor: color + "18" }]}>
+      {imagePng ? (
+        <Image source={imagePng} style={{ width: 28, height: 28 }} />
+      ) : (
+        <MaterialCommunityIcons
+          name={(icon ?? "information") as any}
+          size={24}
+          color={color}
+        />
+      )}
+    </View>
+
+    {/* テキスト */}
+    <View style={styles.textWrap}>
+      <View style={styles.titleRow}>
+        <Text style={styles.cardTitle}>{title}</Text>
+        <Text style={styles.labelText}>{label}</Text>
+      </View>
+      {sub && <Text style={styles.subText} numberOfLines={1}>{sub}</Text>}
+      {detail && <View style={styles.detailWrap}>{detail}</View>}
+    </View>
+
+    {/* バッジ + 矢印 */}
+    <View style={styles.rightArea}>
+      {badge !== null ? (
+        <View style={[styles.badge, { backgroundColor: badgeColor }]}>
+          <Text style={styles.badgeText}>{badge}</Text>
+        </View>
+      ) : null}
+      <MaterialCommunityIcons name="chevron-right" size={20} color="#ccc" />
+    </View>
+  </TouchableOpacity>
+);
+
+/* ------------------------------------------------------------------ */
+/* スタイル                                                              */
+/* ------------------------------------------------------------------ */
+const styles = StyleSheet.create({
+  header: {
+    paddingTop: 8,
+    paddingBottom: 12,
+    paddingHorizontal: 16,
+  },
+  handleBar: {
+    width: 40,
+    height: 5,
+    borderRadius: 3,
+    backgroundColor: "#ddd",
+    alignSelf: "center",
+    marginBottom: 12,
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: 8,
+  },
+  headerTitle: {
+    fontSize: 17,
+    fontWeight: "bold",
+    color: "#111",
+  },
+  headerSub: {
+    fontSize: 14,
+    color: "#888",
+  },
+  trainHeaderRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: 6,
+  },
+  trainTitleBlock: {
+    gap: 4,
+    paddingBottom: 4,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#e8e8e8",
+    marginBottom: 4,
+  },
+  typeTag: {
+    backgroundColor: "#0099CC",
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+  },
+  typeTagText: {
+    color: "#fff",
+    fontSize: 13,
+    fontWeight: "bold",
+  },
+  trainNameText: {
+    fontSize: 16,
+    fontWeight: "bold",
+    color: "#111",
+    flexShrink: 1,
+  },
+  routeRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+  },
+  routeStation: {
+    fontSize: 13,
+    color: "#555",
+  },
+  routeDest: {
+    fontWeight: "bold",
+    color: "#111",
+  },
+  scroll: {},
+  scrollContent: {
+    paddingHorizontal: 14,
+    gap: 10,
+    paddingBottom: 4,
+  },
+  card: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#fff",
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "#ebebeb",
+    overflow: "hidden",
+    minHeight: 70,
+  },
+  combinedCard: {
+    flexDirection: "column",
+    alignItems: "stretch",
+  },
+  combinedHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingTop: 8,
+    paddingBottom: 2,
+    gap: 8,
+  },
+  combinedLabel: {
+    color: "#888",
+    marginLeft: 4,
+  },
+  combinedRow: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    minHeight: 58,
+    paddingVertical: 6,
+  },
+  divider: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: "#ebebeb",
+  },
+  colorBar: {
+    width: 4,
+    alignSelf: "stretch",
+  },
+  iconWrap: {
+    width: 48,
+    height: 48,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    marginHorizontal: 10,
+    flexShrink: 0,
+  },
+  textWrap: {
+    flex: 1,
+    paddingVertical: 6,
+    gap: 3,
+  },
+  titleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+  },
+  cardTitle: {
+    fontSize: 15,
+    fontWeight: "bold",
+    color: "#111",
+  },
+  cardTitleDisabled: {
+    color: "#aaa",
+  },
+  labelText: {
+    fontSize: 10,
+    color: "#aaa",
+    fontWeight: "500",
+  },
+  subText: {
+    fontSize: 12,
+    color: "#555",
+  },
+  subTextDisabled: {
+    color: "#bbb",
+  },
+  rightArea: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingRight: 10,
+    gap: 4,
+  },
+  badge: {
+    minWidth: 20,
+    height: 20,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 5,
+  },
+  badgeText: {
+    color: "#fff",
+    fontSize: 11,
+    fontWeight: "bold",
+  },
+  operationDetailBlock: {
+    //marginTop: 4,
+    gap: 6,
+  },
+  unitIdText: {
+    fontSize: 13,
+    fontWeight: "bold",
+    color: "#0077aa",
+    letterSpacing: 0.5,
+  },
+  footer: {
+    height: 20,
+  },
+  /* ── TrainInfoDetail ──────────────── */
+  detailWrap: {
+    marginTop: 4,
+    marginBottom: 4,
+  },
+  trainDetail: {
+    gap: 8,
+  },
+  ledSection: {
+    gap: 4,
+  },
+  detailSectionLabel: {
+    fontSize: 10,
+    color: "#999",
+    fontWeight: "600",
+    letterSpacing: 0.5,
+  },
+  ledDisplay: {
+    backgroundColor: "#1a1a1a",
+    borderRadius: 5,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    alignSelf: "flex-start",
+  },
+  ledText: {
+    fontFamily: "JNR-font",
+    fontSize: 20,
+    color: "#ff8800",
+    letterSpacing: 2,
+  },
+  trainInfoSection: {
+    gap: 3,
+  },
+  trainInfoText: {
+    fontSize: 12,
+    color: "#333",
+    lineHeight: 18,
+  },
+  metaChipRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 5,
+  },
+  metaChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#f0f0f0",
+    borderRadius: 5,
+    paddingHorizontal: 7,
+    paddingVertical: 3,
+    gap: 4,
+  },
+  metaChipOrange: {
+    backgroundColor: "#fff3e0",
+  },
+  metaChipText: {
+    fontSize: 11,
+    color: "#444",
+  },
+  noteSection: {
+    gap: 4,
+    borderLeftWidth: 2,
+    borderLeftColor: "#e0e0e0",
+    paddingLeft: 8,
+  },
+  noteRow: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 4,
+  },
+  noteText: {
+    fontSize: 11,
+    color: "#666",
+    lineHeight: 16,
+    flex: 1,
+  },
+  directionBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: "#E3F4FB",
+    borderRadius: 5,
+    paddingHorizontal: 7,
+    paddingVertical: 3,
+    marginTop: 4,
+    alignSelf: "flex-start",
+  },
+  directionText: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: "#0099CC",
+  },
+});

components/ActionSheetComponents/sheets.ts

@@ -6,6 +6,7 @@ import { TrainMenuLineSelector } from "./TrainMenuLineSelector";
 import { TrainIconUpdate } from "./TrainIconUpdate";
 import { SpecialTrainInfo } from "./SpecialTrainInfo";
 import { Social } from "./SocialMenu";
+import { TrainDataSources } from "./TrainDataSources";
 
 registerSheet("EachTrainInfo", EachTrainInfo);
 registerSheet("JRSTraInfo", JRSTraInfo);
@@ -14,5 +15,6 @@ registerSheet("TrainMenuLineSelector", TrainMenuLineSelector);
 registerSheet("TrainIconUpdate", TrainIconUpdate);
 registerSheet("SpecialTrainInfo", SpecialTrainInfo);
 registerSheet("Social", Social);
+registerSheet("TrainDataSources", TrainDataSources);
 
 export {};

components/Settings/DataSourceSettings.tsx

@@ -0,0 +1,395 @@
+import React, { useState, useEffect } from "react";
+import { View, Text, ScrollView, StyleSheet, Image, TouchableOpacity, Linking } from "react-native";
+import { Switch } from "react-native-elements";
+import { useNavigation } from "@react-navigation/native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { SheetHeaderItem } from "@/components/atom/SheetHeaderItem";
+import { AS } from "../../storageControl";
+import { STORAGE_KEYS } from "@/constants";
+import { useTrainMenu } from "@/stateBox/useTrainMenu";
+
+const HUB_LOGO_PNG = require("@/assets/icons/hub_logo.png");
+
+/* ------------------------------------------------------------------ */
+/* DataSourceAccordionCard                                              */
+/* ------------------------------------------------------------------ */
+type Feature = { icon: string; label: string; text: string };
+
+type DataSourceAccordionCardProps = {
+  /** ロゴ画像 (require) */
+  logo: any;
+  /** アクセントカラー */
+  accentColor: string;
+  /** データソース名 */
+  title: string;
+  /** 1行サブタイトル */
+  tagline: string;
+  /** スイッチの値 */
+  enabled: boolean;
+  /** スイッチ変更ハンドラ */
+  onToggle: (v: boolean) => void;
+  /** 説明文 */
+  description: string;
+  /** 機能リスト */
+  features: Feature[];
+  /** フッターリンクラベル */
+  linkLabel: string;
+  /** フッターリンク URL */
+  linkUrl: string;
+};
+
+const DataSourceAccordionCard: React.FC<DataSourceAccordionCardProps> = ({
+  logo,
+  accentColor,
+  title,
+  tagline,
+  enabled,
+  onToggle,
+  description,
+  features,
+  linkLabel,
+  linkUrl,
+}) => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <View style={[styles.accordionCard, enabled && styles.accordionCardEnabled]}>
+      {/* ── ヘッダー行（常時表示） ── */}
+      <View style={styles.accordionHeader}>
+        {/* 左：ロゴ */}
+        <Image source={logo} style={styles.accordionLogo} />
+
+        {/* 中央：タイトル＋タグライン */}
+        <View style={styles.accordionTitles}>
+          <Text style={styles.accordionTitle}>{title}</Text>
+          <Text style={styles.accordionTagline}>{tagline}</Text>
+        </View>
+
+        {/* 右：スイッチ */}
+        <Switch
+          value={enabled}
+          onValueChange={onToggle}
+          color={accentColor}
+          style={styles.accordionSwitch}
+        />
+      </View>
+
+      {/* スイッチ状態テキスト */}
+      <View style={styles.accordionStatusRow}>
+        <View style={[styles.statusDot, { backgroundColor: enabled ? accentColor : "#ccc" }]} />
+        <Text style={[styles.statusText, { color: enabled ? accentColor : "#aaa" }]}>
+          {enabled ? "有効 — 編成データを取得します" : "無効 — データを取得しません"}
+        </Text>
+      </View>
+
+      {/* ── 展開トリガー ── */}
+      <TouchableOpacity
+        style={styles.accordionToggleRow}
+        onPress={() => setExpanded((v) => !v)}
+        activeOpacity={0.6}
+      >
+        <Text style={styles.accordionToggleLabel}>
+          {expanded ? "詳細を閉じる" : "鉄道運用Hub について"}
+        </Text>
+        <MaterialCommunityIcons
+          name={expanded ? "chevron-up" : "chevron-down"}
+          size={16}
+          color="#888"
+        />
+      </TouchableOpacity>
+
+      {/* ── 展開コンテンツ ── */}
+      {expanded && (
+        <View style={styles.accordionBody}>
+          {/* 説明文 */}
+          <Text style={styles.bodyDesc}>{description}</Text>
+
+          {/* 機能リスト */}
+          <View style={styles.bodyFeatures}>
+            {features.map((f) => (
+              <View key={f.icon} style={styles.featureRow}>
+                <View style={styles.featureIcon}>
+                  <MaterialCommunityIcons name={f.icon as any} size={14} color="#444" />
+                </View>
+                <Text style={styles.featureLabel}>{f.label}</Text>
+                <Text style={styles.featureText}>{f.text}</Text>
+              </View>
+            ))}
+          </View>
+
+          {/* リンク */}
+          <TouchableOpacity
+            style={styles.bodyLink}
+            onPress={() => Linking.openURL(linkUrl)}
+            activeOpacity={0.7}
+          >
+            <MaterialCommunityIcons name="open-in-new" size={13} color="#555" />
+            <Text style={styles.bodyLinkText}>{linkLabel}</Text>
+          </TouchableOpacity>
+        </View>
+      )}
+    </View>
+  );
+};
+
+/* ------------------------------------------------------------------ */
+/* 定数                                                                 */
+/* ------------------------------------------------------------------ */
+const UNYOHUB_FEATURES: Feature[] = [
+  { icon: "map-marker-radius-outline", label: "走行位置",   text: "どの編成がどの駅間を走っているかリアルタイムで確認" },
+  { icon: "timetable",                 label: "時刻表",     text: "充当編成情報付きの駅時刻表を閲覧" },
+  { icon: "clipboard-list-outline",    label: "運用データ", text: "一日の全運用を一覧表示・過去日付への遡り閲覧" },
+  { icon: "train-car",                 label: "編成表",     text: "車両メーカー・竣工日・運用履歴を閲覧" },
+  { icon: "table-search",              label: "運用表",     text: "列車番号・両数・出庫場所などで運用を検索" },
+];
+
+/* ------------------------------------------------------------------ */
+/* DataSourceSettings                                                   */
+/* ------------------------------------------------------------------ */
+export const DataSourceSettings = () => {
+  const navigation = useNavigation();
+  const { updatePermission, dataSourcePermission } = useTrainMenu();
+  const canAccess = updatePermission || Object.values(dataSourcePermission).some(Boolean);
+  const [useUnyohub, setUseUnyohub] = useState(false);
+
+  useEffect(() => {
+    AS.getItem(STORAGE_KEYS.USE_UNYOHUB).then((value) => {
+      setUseUnyohub(value === true || value === "true");
+    });
+  }, []);
+
+  const handleToggleUnyohub = (value: boolean) => {
+    setUseUnyohub(value);
+    AS.setItem(STORAGE_KEYS.USE_UNYOHUB, value.toString());
+  };
+
+  return (
+    <View style={styles.container}>
+      <SheetHeaderItem
+        title="情報ソース設定"
+        LeftItem={{
+          title: "戻る",
+          onPress: () => navigation.goBack(),
+          position: "left",
+        }}
+      />
+      {!canAccess ? (
+        <View style={styles.noPermissionContainer}>
+          <Text style={styles.noPermissionText}>この設定にアクセスする権限がありません。</Text>
+          <Text style={styles.noPermissionSubText}>鉄道運用Hubまたはアプリ管理者の権限が必要です。</Text>
+        </View>
+      ) : (
+        <ScrollView style={styles.content} contentContainerStyle={styles.contentInner}>
+          <Text style={styles.sectionTitle}>外部データソース</Text>
+
+          <DataSourceAccordionCard
+            logo={HUB_LOGO_PNG}
+            accentColor="#0099CC"
+            title="鉄道運用Hub"
+            tagline="コミュニティによる列車運用情報サービス"
+            enabled={useUnyohub}
+            onToggle={handleToggleUnyohub}
+            description={
+              "鉄道ファン有志の目撃情報をもとに、どの編成がどの列車に充当されているかをリアルタイムで共有・確認できる無料 Web サービスです。JR 四国をはじめ全国多数の路線系統に対応しています。\n\nデータがある列車では地図上に黄色いマークが表示され、列車情報画面の編成表示も更新されます。"
+            }
+            features={UNYOHUB_FEATURES}
+            linkLabel="unyohub.2pd.jp を開く（JR四国）"
+            linkUrl="https://unyohub.2pd.jp/railroad_shikoku/"
+          />
+
+          <View style={styles.infoSection}>
+            <Text style={styles.infoText}>
+              情報ソース設定は、外部のコミュニティデータソースとの連携を管理します。
+              {"\n\n"}
+              データの正確性は保証されません。参考情報としてご利用ください。
+            </Text>
+          </View>
+        </ScrollView>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  /* ── 権限なし ── */
+  noPermissionContainer: {
+    flex: 1,
+    backgroundColor: "#f8f8fc",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 30,
+    gap: 10,
+  },
+  noPermissionText: {
+    fontSize: 16,
+    fontWeight: "bold",
+    color: "#333",
+    textAlign: "center",
+  },
+  noPermissionSubText: {
+    fontSize: 13,
+    color: "#666",
+    textAlign: "center",
+  },
+  /* ── レイアウト ── */
+  container: {
+    flex: 1,
+    backgroundColor: "#0099CC",
+  },
+  content: {
+    flex: 1,
+    backgroundColor: "#f8f8fc",
+  },
+  contentInner: {
+    paddingHorizontal: 14,
+    paddingBottom: 40,
+    gap: 12,
+  },
+  sectionTitle: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#888",
+    letterSpacing: 0.5,
+    marginTop: 20,
+    marginLeft: 4,
+  },
+  /* ── アコーディオンカード ── */
+  accordionCard: {
+    backgroundColor: "#fff",
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: "#e4e4e4",
+    overflow: "hidden",
+  },
+  accordionCardEnabled: {
+    borderColor: "#0099CC44",
+  },
+  accordionHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 14,
+    paddingTop: 14,
+    paddingBottom: 6,
+    gap: 10,
+  },
+  accordionLogo: {
+    width: 40,
+    height: 40,
+    borderRadius: 8,
+    flexShrink: 0,
+  },
+  accordionTitles: {
+    flex: 1,
+    gap: 2,
+  },
+  accordionTitle: {
+    fontSize: 15,
+    fontWeight: "bold",
+    color: "#111",
+  },
+  accordionTagline: {
+    fontSize: 11,
+    color: "#888",
+  },
+  accordionSwitch: {
+    flexShrink: 0,
+  },
+  accordionStatusRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 14,
+    paddingBottom: 10,
+  },
+  statusDot: {
+    width: 7,
+    height: 7,
+    borderRadius: 4,
+  },
+  statusText: {
+    fontSize: 12,
+    fontWeight: "500",
+  },
+  /* ── 展開トリガー ── */
+  accordionToggleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "#ebebeb",
+  },
+  accordionToggleLabel: {
+    fontSize: 12,
+    color: "#666",
+    fontWeight: "500",
+  },
+  /* ── 展開コンテンツ ── */
+  accordionBody: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "#ebebeb",
+    padding: 14,
+    gap: 10,
+    backgroundColor: "#fafafa",
+  },
+  bodyDesc: {
+    fontSize: 12,
+    color: "#444",
+    lineHeight: 19,
+  },
+  bodyFeatures: {
+    gap: 7,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "#e4e4e4",
+    paddingTop: 8,
+  },
+  featureRow: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 6,
+  },
+  featureIcon: {
+    width: 22,
+    alignItems: "center",
+    paddingTop: 1,
+    flexShrink: 0,
+  },
+  featureLabel: {
+    fontSize: 12,
+    fontWeight: "bold",
+    color: "#333",
+    width: 62,
+    flexShrink: 0,
+  },
+  featureText: {
+    fontSize: 12,
+    color: "#555",
+    flex: 1,
+    lineHeight: 17,
+  },
+  bodyLink: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "#e4e4e4",
+    paddingTop: 8,
+    marginTop: 2,
+  },
+  bodyLinkText: {
+    fontSize: 12,
+    color: "#555",
+  },
+  /* ── 注意書き ── */
+  infoSection: {
+    backgroundColor: "#fff3cd",
+    borderRadius: 10,
+    padding: 14,
+  },
+  infoText: {
+    fontSize: 13,
+    color: "#856404",
+    lineHeight: 18,
+  },
+});

components/Settings/SettingTopPage.tsx

@@ -16,6 +16,7 @@ import TouchableScale from "react-native-touchable-scale";
 import { SwitchArea } from "../atom/SwitchArea";
 import { useNotification } from "../../stateBox/useNotifications";
 import { SheetHeaderItem } from "@/components/atom/SheetHeaderItem";
+import { useTrainMenu } from "../../stateBox/useTrainMenu";
 
 const versionCode = "6.2.1"; // Update this version code as needed
 
@@ -27,7 +28,11 @@ export const SettingTopPage = ({
 }) => {
   const { width } = useWindowDimensions();
   const { expoPushToken } = useNotification();
+  const { updatePermission, dataSourcePermission } = useTrainMenu();
   const navigation = useNavigation();
+  // admin またはいずれかのソース権限を持つ場合のみ表示
+  const canAccessDataSourceSettings =
+    updatePermission || Object.values(dataSourcePermission).some(Boolean);
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <SheetHeaderItem title="アプリの設定画面" LeftItem={{
@@ -108,6 +113,14 @@ export const SettingTopPage = ({
               navigation.navigate("setting", { screen: "LayoutSettings" })
             }
           />
+          {canAccessDataSourceSettings && (
+            <SettingList
+              string="情報ソース設定"
+              onPress={() =>
+                navigation.navigate("setting", { screen: "DataSourceSettings" })
+              }
+            />
+          )}
           {Platform.OS === "android" ? (
             <SettingList
               string="ウィジェット設定"

components/Settings/settings.tsx

@@ -24,6 +24,7 @@ import { FavoriteSettings } from "./FavoriteSettings";
 import { WidgetSettings } from "./WidgetSettings";
 import { NotificationSettings } from "./NotificationSettings";
 import { LauncherIconSettings } from "./LauncherIconSettings";
+import { DataSourceSettings } from "./DataSourceSettings";
 
 const Stack = createStackNavigator();
 export default function Setting(props) {
@@ -167,6 +168,17 @@ export default function Setting(props) {
         }}
         component={FavoriteSettings}
       />
+      <Stack.Screen
+        name="DataSourceSettings"
+        options={{
+          gestureEnabled: true,
+          ...TransitionPresets.SlideFromRightIOS,
+          cardOverlayEnabled: true,
+          headerTransparent: true,
+          headerShown: false,
+        }}
+        component={DataSourceSettings}
+      />
     </Stack.Navigator>
   );
 }

components/StationDiagram/ExGridSimpleViewItem.tsx

@@ -55,8 +55,8 @@ export const ExGridSimpleViewItem: FC<{
     type: trainData?.type,
     whiteMode: true,
   });
-  // 列車名、種別、フォントの取得
-  const [trainName] = useMemo(() => {
+  // 行き先（駅名）の取得
+  const [destinationName] = useMemo(() => {
     // to_dataが設定されていればそれを優先
     if (trainData?.to_data) {
       return [trainData.to_data];
@@ -75,6 +75,9 @@ export const ExGridSimpleViewItem: FC<{
         return [migrateTrainName(trainName)];
     }
   }, [d.array, trainData]);
+  
+  // 列車名の取得（上部表示用）
+  const trainName = trainData?.train_name || "";
   const timeArray = d.time.split(":").map((s) => parseInt(s));
   const formattedTime = dayjs()
     .set("hour", timeArray[0])
@@ -146,7 +149,7 @@ export const ExGridSimpleViewItem: FC<{
     // to_dataがある場合は、to_dataから駅名を抽出して色を判定
     const stationNameForColor = trainData?.to_data 
       ? trainData.to_data.replace(/行き$/, "") // 「行き」を除去
-      : trainName;
+      : destinationName;
     
     const Stations = stationList
       .map((a) => a.filter((d) => d.StationName == stationNameForColor))
@@ -161,7 +164,7 @@ export const ExGridSimpleViewItem: FC<{
       );
       setStationColor(stationLineColor || ["gray"]);
     }
-  }, [stationList, trainName, trainData]);
+  }, [stationList, destinationName, trainData]);
   // if(typeString == "回送"){
   //   return<></>;
   // }
@@ -237,7 +240,7 @@ export const ExGridSimpleViewItem: FC<{
             textDecorationLine: isCancelled ? "line-through" : "none",
           }}
         >
-          {trainName}
+          {destinationName}
         </Text>
       </View>
       <View style={{ flex: 1 }} />

components/発車時刻表/EachData.tsx

@@ -13,6 +13,7 @@ import { TrainName } from "@/components/発車時刻表/LED_inside_Component/Tra
 import { TrainPosition } from "@/components/発車時刻表/LED_inside_Component/TrainPosition";
 import { StationPosPushDialog } from "@/components/発車時刻表/LED_inside_Component/TrainPositionDataPush";
 import { StationPosDeleteDialog } from "@/components/発車時刻表/LED_inside_Component/TrainPositionDataDelete";
+import { ScrollingDescription } from "@/components/発車時刻表/LED_inside_Component/ScrollingDescription";
 import { useStationList } from "@/stateBox/useStationList";
 import useInterval from "@/lib/useInterval";
 import dayjs from "dayjs";
@@ -197,17 +198,19 @@ export const EachData: FC<Props> = (props) => {
           trainID={d.train}
           type={train.type}
           isThrew={d.isThrough}
+          se={d.se}
         />
         <LastStation
           lastStation={d.lastStation}
           ToData={train.to_data}
           Station_JP={station.Station_JP}
+          se={d.se}
         />
-        <PlatformNumber platform={d.platformNum} />
+        <PlatformNumber platform={d.platformNum} se={d.se} />
         {timeDisplay ? (
-          <DependTime time={d.time} isDelay={isDelay} />
+          <DependTime time={d.time} isDelay={isDelay} se={d.se} />
         ) : (
-          <StatusAndDelay trainDelayStatus={trainDelayStatus} />
+          <StatusAndDelay trainDelayStatus={trainDelayStatus} se={d.se} />
         )}
       </TouchableOpacity>
       {!!isDepartureNow && (
@@ -243,7 +246,20 @@ export const EachData: FC<Props> = (props) => {
         />
       )}
       {trainDescriptionSwitch && !!train.train_info && (
-        <Description info={train.train_info} key={d.train + "-description"} />
+        <TouchableOpacity
+          style={{
+            alignContent: "center",
+            alignItems: "center",
+            width: "94%",
+            marginVertical: 5,
+            marginHorizontal: "3%",
+            backgroundColor: "#000",
+            overflow: "hidden",
+          }}
+          key={d.train + "-description"}
+        >
+          <ScrollingDescription description={train.train_info} />
+        </TouchableOpacity>
       )}
       {trainDescriptionSwitch && !!train.uwasa && (
         <Description info={train.uwasa} key={d.train + "-uwasa"} />

components/発車時刻表/LED_inside_Component/DependTime.tsx

@@ -7,13 +7,17 @@ const descriptionStyle: TextStyle = {
 type Props = {
   time: string;
   isDelay?: boolean;
+  se?: string;
+};
+export const DependTime: FC<Props> = ({ time, isDelay, se }) => {
+  const isCanceled = se?.includes("休");
+  return (
+    <View style={{ flex: 4 }}>
+      <Text
+        style={{ ...descriptionStyle, color: isCanceled ? "#999" : isDelay ? "#ffd16fff" : "white", textDecorationLine: isCanceled ? "line-through" : "none" }}
+      >
+        {time}
+      </Text>
+    </View>
+  );
 };
-export const DependTime: FC<Props> = ({ time, isDelay }) => (
-  <View style={{ flex: 4 }}>
-    <Text
-      style={{ ...descriptionStyle, color: isDelay ? "#ffd16fff" : "white" }}
-    >
-      {time}
-    </Text>
-  </View>
-);

components/発車時刻表/LED_inside_Component/LastStation.tsx

@@ -5,17 +5,33 @@ type Props = {
   lastStation: string;
   ToData: string;
   Station_JP: string;
+  se?: string;
 };
-export const LastStation: FC<Props> = ({ lastStation, ToData, Station_JP }) => {
+export const LastStation: FC<Props> = ({ lastStation, ToData, Station_JP, se }) => {
   const isEdit = !ToData ? false : ToData !== lastStation;
   const string = isEdit ? ToData : lastStation;
+  const isCanceled = se?.includes("休");
+  
   return (
     <View style={{ flex: 4, flexDirection: "row" }}>
+      {isCanceled && (
+        <Text
+          style={{
+            fontSize: parseInt("12%"),
+            color: "#ff6b6b",
+            fontWeight: "bold",
+            marginRight: 4,
+          }}
+        >
+          運休
+        </Text>
+      )}
       <Text
         style={{
           fontSize: lastStation?.length > 4 ? parseInt("12%") : parseInt("16%"),
-          color: isEdit ? "#ffd16fff" : "white",
+          color: isCanceled ? "#999" : isEdit ? "#ffd16fff" : "white",
           fontWeight: "bold",
+          textDecorationLine: isCanceled ? "line-through" : "none",
         }}
       >
         {string === Station_JP ? "当駅止" : string}

components/発車時刻表/LED_inside_Component/PlatformNumber.tsx

@@ -6,11 +6,13 @@ const descriptionStyle: TextStyle = {
 };
 type Props = {
   platform: string;
+  se?: string;
 };
-export const PlatformNumber: FC<Props> = ({ platform }) => {
+export const PlatformNumber: FC<Props> = ({ platform, se }) => {
+  const isCanceled = se?.includes("休");
   return (
     <View style={{ flex: 2 }}>
-      <Text style={{ ...descriptionStyle, color: "white", paddingLeft: 1 }}>
+      <Text style={{ ...descriptionStyle, color: isCanceled ? "#999" : "white", paddingLeft: 1, textDecorationLine: isCanceled ? "line-through" : "none" }}>
         {platform}
       </Text>
     </View>

components/発車時刻表/LED_inside_Component/ScrollingDescription.tsx

@@ -0,0 +1,127 @@
+import React, { FC, useEffect, useRef, useState } from "react";
+import { Animated, Text, View, LayoutChangeEvent } from "react-native";
+
+type Props = {
+  description: string;
+};
+
+export const ScrollingDescription: FC<Props> = ({ description }) => {
+  const scrollX = useRef(new Animated.Value(0)).current;
+  const [textWidth, setTextWidth] = useState(0);
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  // 改行を削除して1行にする
+  const singleLineDescription = description?.replace(/\n/g, " ") || "";
+
+  useEffect(() => {
+    if (!singleLineDescription || textWidth === 0 || containerWidth === 0) {
+      return;
+    }
+
+    // テキストが画面幅より短い場合はスクロールしない
+    if (textWidth <= containerWidth) {
+      return;
+    }
+
+    // 初期位置を設定（画面の右端から開始）
+    scrollX.setValue(containerWidth);
+    
+    const distance = textWidth + containerWidth;
+    const duration = distance * 10; // スクロール速度
+
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.delay(500), // 最初に0.5秒待つ
+        Animated.timing(scrollX, {
+          toValue: -textWidth - 20,
+          duration: duration,
+          useNativeDriver: true,
+        }),
+        Animated.delay(500),
+        // 瞬時に右端に戻る
+        Animated.timing(scrollX, {
+          toValue: containerWidth,
+          duration: 0,
+          useNativeDriver: true,
+        }),
+      ])
+    );
+
+    animation.start();
+
+    return () => {
+      animation.stop();
+      scrollX.setValue(containerWidth);
+    };
+  }, [singleLineDescription, textWidth, containerWidth]);
+
+  const handleTextLayout = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    if (width > 0) {
+      setTextWidth(width);
+    }
+  };
+
+  const handleContainerLayout = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    if (width > 0) {
+      setContainerWidth(width);
+    }
+  };
+
+  if (!singleLineDescription) {
+    return null;
+  }
+
+  return (
+    <View
+      style={{
+        width: "100%",
+        height: 20,
+        overflow: "hidden",
+        backgroundColor: "#000",
+      }}
+      onLayout={handleContainerLayout}
+    >
+      {/* 測定用の透明なテキスト（画面外、幅制限なし） */}
+      <View
+        style={{
+          position: "absolute",
+          top: -1000,
+          left: 0,
+          width: 9999, // 十分な幅を確保してテキストが折り返されないようにする
+          opacity: 0,
+        }}
+      >
+        <Text
+          style={{
+            fontSize: 16,
+            fontWeight: "bold",
+          }}
+          onLayout={handleTextLayout}
+        >
+          {singleLineDescription}
+        </Text>
+      </View>
+
+      {/* 実際に表示されるスクロールテキスト（幅制限なし） */}
+      <Animated.View
+        style={{
+          position: "absolute",
+          transform: [{ translateX: scrollX }],
+          width: 9999, // テキストが折り返されないように十分な幅を確保
+        }}
+      >
+        <Text
+          style={{
+            fontSize: 16,
+            fontWeight: "bold",
+            color: "#d3a203",
+          }}
+        >
+          {singleLineDescription}
+        </Text>
+      </Animated.View>
+    </View>
+  );
+};

components/発車時刻表/LED_inside_Component/StatusAndDelay.tsx

@@ -6,11 +6,13 @@ const descriptionStyle: TextStyle = {
 };
 type Props = {
   trainDelayStatus: string;
+  se?: string;
 };
-export const StatusAndDelay: FC<Props> = ({ trainDelayStatus }) => {
+export const StatusAndDelay: FC<Props> = ({ trainDelayStatus, se }) => {
+  const isCanceled = se?.includes("休");
   return (
     <View style={{ flex: 4 }}>
-      <Text style={{ ...descriptionStyle, color: "#ffd16fff", paddingLeft: 1 }}>
+      <Text style={{ ...descriptionStyle, color: isCanceled ? "#999" : "#ffd16fff", paddingLeft: 1, textDecorationLine: isCanceled ? "line-through" : "none" }}>
         {trainDelayStatus}
       </Text>
     </View>

components/発車時刻表/LED_inside_Component/TrainName.tsx

@@ -9,9 +9,10 @@ type Props = {
   trainID: string;
   type: trainTypeID;
   isThrew: boolean;
+  se?: string;
 };
 export const TrainName: FC<Props> = (props) => {
-  const { trainName, trainNumDistance, trainIDSwitch, trainID, type, isThrew } =
+  const { trainName, trainNumDistance, trainIDSwitch, trainID, type, isThrew, se } =
     props;
   const { name, color } = getTrainType({ type });
   const TrainNumber =
@@ -23,13 +24,15 @@ export const TrainName: FC<Props> = (props) => {
           parseInt(trainNumDistance)
         }号`
       : "";
+  const isCanceled = se?.includes("休");
   return (
     <View style={{ flex: 9, flexDirection: "row", alignItems: "center" }}>
       <Text
         style={{
           fontSize: trainName.length > 6 ? parseInt("11%") : parseInt("15%"),
-          color: color,
+          color: isCanceled ? "#999" : color,
           fontWeight: "bold",
+          textDecorationLine: isCanceled ? "line-through" : "none",
         }}
       >
         {trainIDSwitch

constants/api.ts

@@ -31,6 +31,9 @@ export const API_ENDPOINTS = {
   
   /** 位置情報問題データ */
   POSITION_PROBLEMS: 'https://n8n.haruk.in/webhook/jrshikoku-position-problems',
+  
+  /** 鉄道運用Hub運用データ */
+  UNYOHUB_DATA: 'https://jr-shikoku-api-data-storage.haruk.in/thirdparty/unyohub-unyo.json',
 } as const;
 
 /**

constants/storage.ts

@@ -80,6 +80,13 @@ export const STORAGE_KEYS = {
   
   /** 奇妙な列車通知 */
   STRANGE_TRAIN: 'strangeTrain',
+  
+  // 情報ソース設定系
+  /** 鉄道運用Hub使用設定 */
+  USE_UNYOHUB: 'useUnyohub',
+  
+  /** 鉄道運用Hubデータ */
+  UNYOHUB_DATA: 'unyohubData',
 } as const;
 
 /**

lib/CommonTypes.ts

@@ -70,6 +70,7 @@ export type CustomTrainData = {
     lastStation: string;
     isThrough: boolean;
     platformNum: string | null;
+    se?: string;
   };
   
   export type StationProps = {
@@ -93,6 +94,7 @@ export type OperationLogs = {
   train_ids?: string[];
   unit_ids?: string[];
   vehicle_img: string;
+  vehicle_img_right: string;
   vehicle_info_url: string;
   related_train_ids?: string[];
   state: number | null;

lib/trainTimeFiltering.ts

@@ -74,6 +74,7 @@ export const getTime: getTimeProps = (stationDiagram, station) => {
         isThrough: false,
         train: trainNum,
         platformNum: null,
+        se: undefined,
       };
       stationDiagram[trainNum].split("#").forEach((data) => {
         const [stationName, type, time, platformNum] = data.split(",");
@@ -83,6 +84,7 @@ export const getTime: getTimeProps = (stationDiagram, station) => {
         }
         if (stationName === station.Station_JP) {
           trainData.platformNum = platformNum;
+          trainData.se = type;
           if (type.match("発")) {
             trainData.time = time;
           } else if (type.match("通")) {
@@ -99,6 +101,7 @@ export const getTime: getTimeProps = (stationDiagram, station) => {
         lastStation: trainData.lastStation,
         isThrough: trainData.isThrough,
         platformNum: trainData.platformNum,
+        se: trainData.se,
       };
     })
     .filter((d) => d.time);

lib/useInterval.ts

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { AppState, AppStateStatus, Platform } from "react-native";
 
 type Control = {
   start: () => void;
@@ -12,10 +13,15 @@ type Fn = () => void;
 export const useInterval = (fn: Fn, interval: number, autostart = true) => {
   const onUpdateRef = useRef<Fn>();
   const [state, setState] = useState("RUNNING");
+  // ユーザー操作によるSTOP（AppStateによる一時停止と区別する）
+  const userStoppedRef = useRef(!autostart);
+
   const start = () => {
+    userStoppedRef.current = false;
     setState("RUNNING");
   };
   const stop = () => {
+    userStoppedRef.current = true;
     setState("STOPPED");
   };
   useEffect(() => {
@@ -23,22 +29,48 @@ export const useInterval = (fn: Fn, interval: number, autostart = true) => {
   }, [fn]);
   useEffect(() => {
     if (autostart) {
+      userStoppedRef.current = false;
       setState("RUNNING");
-    }else{
+    } else {
+      userStoppedRef.current = true;
       setState("STOPPED");
     }
   }, [autostart]);
+
+  // バックグラウンド移行時に停止、フォアグラウンド復帰時に即時実行して再開
   useEffect(() => {
-    let timerId;
+    if (Platform.OS === "web") return;
+    const handleAppStateChange = (nextAppState: AppStateStatus) => {
+      if (nextAppState === "active") {
+        if (!userStoppedRef.current) {
+          // 復帰直後に即時フェッチして最新データを取得
+          onUpdateRef.current?.();
+          setState("RUNNING");
+        }
+      } else if (nextAppState === "background" || nextAppState === "inactive") {
+        if (!userStoppedRef.current) {
+          // バックグラウンド中はインターバルを停止してムダなfetchエラーを防ぐ
+          setState("STOPPED");
+        }
+      }
+    };
+    const subscription = AppState.addEventListener("change", handleAppStateChange);
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    let timerId: ReturnType<typeof setInterval> | undefined;
     if (state === "RUNNING") {
       timerId = setInterval(() => {
         onUpdateRef.current?.();
       }, interval);
     } else {
-      timerId && clearInterval(timerId);
+      if (timerId) clearInterval(timerId);
     }
     return () => {
-      timerId && clearInterval(timerId);
+      if (timerId) clearInterval(timerId);
     };
   }, [interval, state]);
   return [state, { start, stop }];

lib/webview/stationData.ts

@@ -0,0 +1,72 @@
+/**
+ * 駅情報データ (みどりの窓口・ICカード対応状況)
+ * Feature フィールドは WebView 内で JSON.parse() して使用する。
+ */
+export interface StationDataItem {
+  StationName: string;
+  StationNumber: string;
+  /** JSON文字列: { Midori: { style: "normal"|"plus"|"none" }, IC: boolean } */
+  Feature: string;
+}
+
+export const STATION_DATA: StationDataItem[] = [
+  // ── 予讃線 ─────────────────────────────
+  { StationName: "高松",     StationNumber: "Y00", Feature: '{"Midori":{"style":"normal"},"IC":true}' },
+  { StationName: "香西",     StationNumber: "Y01", Feature: '{"Midori":{"style":"none"},"IC":true}' },
+  { StationName: "鬼無",     StationNumber: "Y02", Feature: '{"Midori":{"style":"none"},"IC":true}' },
+  { StationName: "端岡",     StationNumber: "Y03", Feature: '{"Midori":{"style":"none"},"IC":true}' },
+  { StationName: "国分",     StationNumber: "Y04", Feature: '{"Midori":{"style":"none"},"IC":true}' },
+  { StationName: "讃岐府中", StationNumber: "Y05", Feature: '{"Midori":{"style":"none"},"IC":true}' },
+  { StationName: "鴨川",     StationNumber: "Y06", Feature: '{"Midori":{"style":"none"},"IC":true}' },
+  { StationName: "八十場",   StationNumber: "Y07", Feature: '{"Midori":{"style":"none"},"IC":true}' },
+  { StationName: "坂出",     StationNumber: "Y08", Feature: '{"Midori":{"style":"normal"},"IC":true}' },
+  { StationName: "宇多津",   StationNumber: "Y09", Feature: '{"Midori":{"style":"normal"},"IC":true}' },
+  { StationName: "丸亀",     StationNumber: "Y10", Feature: '{"Midori":{"style":"normal"},"IC":true}' },
+  { StationName: "讃岐塩屋", StationNumber: "Y11", Feature: '{"Midori":{"style":"none"},"IC":true}' },
+  { StationName: "多度津",   StationNumber: "Y12", Feature: '{"Midori":{"style":"normal"},"IC":true}' },
+  { StationName: "詫間",     StationNumber: "Y14", Feature: '{"Midori":{"style":"plus"},"IC":true}' },
+  { StationName: "観音寺",   StationNumber: "Y19", Feature: '{"Midori":{"style":"normal"},"IC":true}' },
+  { StationName: "川之江",   StationNumber: "Y22", Feature: '{"Midori":{"style":"plus"},"IC":false}' },
+  { StationName: "伊予三島", StationNumber: "Y23", Feature: '{"Midori":{"style":"normal"},"IC":false}' },
+  { StationName: "新居浜",   StationNumber: "Y29", Feature: '{"Midori":{"style":"normal"},"IC":false}' },
+  { StationName: "伊予西条", StationNumber: "Y31", Feature: '{"Midori":{"style":"normal"},"IC":false}' },
+  { StationName: "壬生川",   StationNumber: "Y36", Feature: '{"Midori":{"style":"plus"},"IC":false}' },
+  { StationName: "今治",     StationNumber: "Y40", Feature: '{"Midori":{"style":"plus"},"IC":false}' },
+  { StationName: "伊予北条", StationNumber: "Y48", Feature: '{"Midori":{"style":"plus"},"IC":false}' },
+  { StationName: "松山",     StationNumber: "Y55", Feature: '{"Midori":{"style":"normal"},"IC":false}' },
+  // ── 内子線・海線 ─────────────────────────
+  { StationName: "内子",     StationNumber: "U10", Feature: '{"Midori":{"style":"plus"},"IC":false}' },
+  { StationName: "伊予大洲", StationNumber: "U14", Feature: '{"Midori":{"style":"plus"},"IC":false}' },
+  { StationName: "伊予大洲", StationNumber: "S18", Feature: '{"Midori":{"style":"plus"},"IC":false}' },
+  { StationName: "八幡浜",   StationNumber: "U18", Feature: '{"Midori":{"style":"normal"},"IC":false}' },
+  { StationName: "宇和島",   StationNumber: "U28", Feature: '{"Midori":{"style":"plus"},"IC":false}' },
+  // ── 土讃線 ─────────────────────────────
+  { StationName: "多度津",   StationNumber: "D12", Feature: '{"Midori":{"style":"normal"},"IC":true}' },
+  { StationName: "善通寺",   StationNumber: "D14", Feature: '{"Midori":{"style":"plus"},"IC":true}' },
+  { StationName: "琴平",     StationNumber: "D15", Feature: '{"Midori":{"style":"plus"},"IC":true}' },
+  { StationName: "阿波池田", StationNumber: "D22", Feature: '{"Midori":{"style":"plus"},"IC":false}' },
+  { StationName: "土佐山田", StationNumber: "D37", Feature: '{"Midori":{"style":"plus"},"IC":false}' },
+  { StationName: "後免",     StationNumber: "D40", Feature: '{"Midori":{"style":"plus"},"IC":false}' },
+  { StationName: "高知",     StationNumber: "D45", Feature: '{"Midori":{"style":"normal"},"IC":false}' },
+  // ── 予土線 ─────────────────────────────
+  { StationName: "高知",     StationNumber: "K00", Feature: '{"Midori":{"style":"normal"},"IC":false}' },
+  { StationName: "朝倉",     StationNumber: "K05", Feature: '{"Midori":{"style":"plus"},"IC":false}' },
+  { StationName: "須崎",     StationNumber: "K19", Feature: '{"Midori":{"style":"plus"},"IC":false}' },
+  { StationName: "窪川",     StationNumber: "K26", Feature: '{"Midori":{"style":"normal"},"IC":false}' },
+  // ── 高徳線 ─────────────────────────────
+  { StationName: "高松",     StationNumber: "T28", Feature: '{"Midori":{"style":"normal"},"IC":true}' },
+  { StationName: "栗林公園北口", StationNumber: "T26", Feature: '{"Midori":{"style":"none"},"IC":true}' },
+  { StationName: "栗林",     StationNumber: "T25", Feature: '{"Midori":{"style":"plus"},"IC":true}' },
+  { StationName: "屋島",     StationNumber: "T24", Feature: '{"Midori":{"style":"none"},"IC":true}' },
+  { StationName: "志度",     StationNumber: "T19", Feature: '{"Midori":{"style":"plus"},"IC":false}' },
+  { StationName: "三本松",   StationNumber: "T12", Feature: '{"Midori":{"style":"plus"},"IC":false}' },
+  { StationName: "徳島",     StationNumber: "T00", Feature: '{"Midori":{"style":"normal"},"IC":false}' },
+  // ── 鳴門線 ─────────────────────────────
+  { StationName: "鳴門",     StationNumber: "N10", Feature: '{"Midori":{"style":"plus"},"IC":false}' },
+  // ── 牟岐線 ─────────────────────────────
+  { StationName: "阿南",     StationNumber: "",    Feature: '{"Midori":{"style":"normal"},"IC":false}' },
+  { StationName: "牟岐",     StationNumber: "",    Feature: '{"Midori":{"style":"normal"},"IC":false}' },
+  // ── 徳島線 ─────────────────────────────
+  { StationName: "鴨島",     StationNumber: "B09", Feature: '{"Midori":{"style":"plus"},"IC":false}' },
+  { StationName: "穴吹",     StationNumber: "B16", Feature: '{"Midori":{"style":"plus"},"IC":false}' },
+];

lib/webview/trainIconMap.ts

@@ -0,0 +1,455 @@
+/**
+ * 列番号 → 列車画像URL のマッピングデータ
+ *
+ * "__anpanman__" は動的URLのセンチネル値。
+ * WebView inject 側で アンパンマン列車判定 URL に変換される。
+ * (https://n8n.haruk.in/webhook/anpanman-pictures.png?trainNum=<列番>)
+ */
+
+const AP = "__anpanman__";
+
+/** 完全一致マッピング (列番 → URL | "__anpanman__") */
+export const TRAIN_ICON_MAP: Record<string, string> = {
+  // ── しおかぜ ───────────────────────────────────────
+  // 8000 ノーマル
+  "2M": "https://storage.haruk.in/s8000nr.png",
+  "4M": "https://storage.haruk.in/s8000nr.png",
+  "6M": "https://storage.haruk.in/s8000nr.png",
+  "14M": "https://storage.haruk.in/s8000nr.png",
+  "16M": "https://storage.haruk.in/s8000nr.png",
+  "18M": "https://storage.haruk.in/s8000nr.png",
+  "26M": "https://storage.haruk.in/s8000nr.png",
+  "28M": "https://storage.haruk.in/s8000nr.png",
+  "30M": "https://storage.haruk.in/s8000nr.png",
+  "1M": "https://storage.haruk.in/s8000nr.png",
+  "3M": "https://storage.haruk.in/s8000nr.png",
+  "5M": "https://storage.haruk.in/s8000nr.png",
+  "13M": "https://storage.haruk.in/s8000nr.png",
+  "15M": "https://storage.haruk.in/s8000nr.png",
+  "17M": "https://storage.haruk.in/s8000nr.png",
+  "25M": "https://storage.haruk.in/s8000nr.png",
+  "27M": "https://storage.haruk.in/s8000nr.png",
+  "29M": "https://storage.haruk.in/s8000nr.png",
+  // 8000 アンパン
+  "10M": AP,
+  "22M": AP,
+  "9M": AP,
+  "21M": AP,
+  // 8600
+  "8M": "https://storage.haruk.in/s8600.png",
+  "12M": "https://storage.haruk.in/s8600.png",
+  "20M": "https://storage.haruk.in/s8600.png",
+  "24M": "https://storage.haruk.in/s8600.png",
+  "7M": "https://storage.haruk.in/s8600.png",
+  "11M": "https://storage.haruk.in/s8600.png",
+  "19M": "https://storage.haruk.in/s8600.png",
+  "23M": "https://storage.haruk.in/s8600.png",
+
+  // ── いしづち ───────────────────────────────────────
+  // 8000 ノーマル
+  "1004M": "https://storage.haruk.in/s8000no.png",
+  "1006M": "https://storage.haruk.in/s8000no.png",
+  "1014M": "https://storage.haruk.in/s8000no.png",
+  "1016M": "https://storage.haruk.in/s8000no.png",
+  "1018M": "https://storage.haruk.in/s8000no.png",
+  "1026M": "https://storage.haruk.in/s8000no.png",
+  "1028M": "https://storage.haruk.in/s8000no.png",
+  "1030M": "https://storage.haruk.in/s8000no.png",
+  "1001M": "https://storage.haruk.in/s8000no.png",
+  "1003M": "https://storage.haruk.in/s8000no.png",
+  "1005M": "https://storage.haruk.in/s8000no.png",
+  "1013M": "https://storage.haruk.in/s8000no.png",
+  "1015M": "https://storage.haruk.in/s8000no.png",
+  "1017M": "https://storage.haruk.in/s8000no.png",
+  "1025M": "https://storage.haruk.in/s8000no.png",
+  "1027M": "https://storage.haruk.in/s8000no.png",
+  "1029M": "https://storage.haruk.in/s8000no.png",
+  // 8000 アンパン
+  "1010M": AP,
+  "1022M": AP,
+  "1009M": AP,
+  "1021M": AP,
+  // 8600
+  "1008M": "https://storage.haruk.in/s8600_isz.png",
+  "1012M": "https://storage.haruk.in/s8600_isz.png",
+  "1020M": "https://storage.haruk.in/s8600_isz.png",
+  "1024M": "https://storage.haruk.in/s8600_isz.png",
+  "1007M": "https://storage.haruk.in/s8600_isz.png",
+  "1011M": "https://storage.haruk.in/s8600_isz.png",
+  "1019M": "https://storage.haruk.in/s8600_isz.png",
+  "1023M": "https://storage.haruk.in/s8600_isz.png",
+  // MEXP
+  "1092M": "https://storage.haruk.in/s8000nr.png",
+  "1091M": "https://storage.haruk.in/s8600_isz.png",
+  // 三桁いしづち アンパン
+  "1041M": AP,
+  "1044M": AP,
+  // 三桁いしづち 8600
+  "1043M": "https://storage.haruk.in/s8600_isz.png",
+  "1042M": "https://storage.haruk.in/s8600_isz.png",
+  "1046M": "https://storage.haruk.in/s8600_isz.png",
+
+  // ── 南風 ───────────────────────────────────────────
+  // 2700 ノーマル
+  "34D": "https://storage.haruk.in/s2700.png",
+  "38D": "https://storage.haruk.in/s2700.png",
+  "40D": "https://storage.haruk.in/s2700.png",
+  "42D": "https://storage.haruk.in/s2700.png",
+  "46D": "https://storage.haruk.in/s2700.png",
+  "50D": "https://storage.haruk.in/s2700.png",
+  "52D": "https://storage.haruk.in/s2700.png",
+  "54D": "https://storage.haruk.in/s2700.png",
+  "58D": "https://storage.haruk.in/s2700.png",
+  "31D": "https://storage.haruk.in/s2700.png",
+  "35D": "https://storage.haruk.in/s2700.png",
+  "39D": "https://storage.haruk.in/s2700.png",
+  "41D": "https://storage.haruk.in/s2700.png",
+  "43D": "https://storage.haruk.in/s2700.png",
+  "47D": "https://storage.haruk.in/s2700.png",
+  "51D": "https://storage.haruk.in/s2700.png",
+  "53D": "https://storage.haruk.in/s2700.png",
+  "55D": "https://storage.haruk.in/s2700.png",
+  // 2700 アンパン
+  "32D": AP,
+  "36D": AP,
+  "44D": AP,
+  "48D": AP,
+  "56D": AP,
+  "33D": AP,
+  "37D": AP,
+  "45D": AP,
+  "49D": AP,
+  "57D": AP,
+
+  // ── うずしお ───────────────────────────────────────
+  // 2700
+  "3004D": "https://storage.haruk.in/s2700_uzu.png",
+  "3006D": "https://storage.haruk.in/s2700_uzu.png",
+  "3010D": "https://storage.haruk.in/s2700_uzu.png",
+  "3014D": "https://storage.haruk.in/s2700_uzu.png",
+  "3016D": "https://storage.haruk.in/s2700_uzu.png",
+  "3022D": "https://storage.haruk.in/s2700_uzu.png",
+  "3028D": "https://storage.haruk.in/s2700_uzu.png",
+  "3003D": "https://storage.haruk.in/s2700_uzu.png",
+  "3007D": "https://storage.haruk.in/s2700_uzu.png",
+  "3013D": "https://storage.haruk.in/s2700_uzu.png",
+  "3019D": "https://storage.haruk.in/s2700_uzu.png",
+  "3025D": "https://storage.haruk.in/s2700_uzu.png",
+  "3031D": "https://storage.haruk.in/s2700_uzu.png",
+  "3008D": "https://storage.haruk.in/s2700_uzu.png",
+  "3020D": "https://storage.haruk.in/s2700_uzu.png",
+  "3026D": "https://storage.haruk.in/s2700_uzu.png",
+  "3001D": "https://storage.haruk.in/s2700_uzu.png",
+  "3005D": "https://storage.haruk.in/s2700_uzu.png",
+  "3011D": "https://storage.haruk.in/s2700_uzu.png",
+  "3017D": "https://storage.haruk.in/s2700_uzu.png",
+  "3023D": "https://storage.haruk.in/s2700_uzu.png",
+  "3029D": "https://storage.haruk.in/s2700_uzu.png",
+  // 2600
+  "3002D": AP,
+  "3012D": AP,
+  "3018D": AP,
+  "3024D": AP,
+  "3030D": AP,
+  "3009D": AP,
+  "3015D": AP,
+  "3021D": AP,
+  "3027D": AP,
+  "3033D": AP,
+
+  // ── マリンライナー ─────────────────────────────────
+  "3104M": "https://storage.haruk.in/s5001.png",
+  "3106M": "https://storage.haruk.in/s5001.png",
+  "3108M": "https://storage.haruk.in/s5001.png",
+  "3110M": "https://storage.haruk.in/s5001.png",
+  "3112M": "https://storage.haruk.in/s5001.png",
+  "3114M": "https://storage.haruk.in/s5001.png",
+  "3116M": "https://storage.haruk.in/s5001.png",
+  "3118M": "https://storage.haruk.in/s5001.png",
+  "3120M": "https://storage.haruk.in/s5001.png",
+  "3122M": "https://storage.haruk.in/s5001.png",
+  "3124M": "https://storage.haruk.in/s5001.png",
+  "3126M": "https://storage.haruk.in/s5001.png",
+  "3128M": "https://storage.haruk.in/s5001.png",
+  "3130M": "https://storage.haruk.in/s5001.png",
+  "3132M": "https://storage.haruk.in/s5001.png",
+  "3134M": "https://storage.haruk.in/s5001.png",
+  "3136M": "https://storage.haruk.in/s5001.png",
+  "3138M": "https://storage.haruk.in/s5001.png",
+  "3140M": "https://storage.haruk.in/s5001.png",
+  "3142M": "https://storage.haruk.in/s5001.png",
+  "3144M": "https://storage.haruk.in/s5001.png",
+  "3146M": "https://storage.haruk.in/s5001.png",
+  "3148M": "https://storage.haruk.in/s5001.png",
+  "3150M": "https://storage.haruk.in/s5001.png",
+  "3152M": "https://storage.haruk.in/s5001.png",
+  "3154M": "https://storage.haruk.in/s5001.png",
+  "3156M": "https://storage.haruk.in/s5001.png",
+  "3158M": "https://storage.haruk.in/s5001.png",
+  "3160M": "https://storage.haruk.in/s5001.png",
+  "3162M": "https://storage.haruk.in/s5001.png",
+  "3164M": "https://storage.haruk.in/s5001.png",
+  "3166M": "https://storage.haruk.in/s5001.png",
+  "3168M": "https://storage.haruk.in/s5001.png",
+  "3170M": "https://storage.haruk.in/s5001.png",
+  "3105M": "https://storage.haruk.in/s5001.png",
+  "3107M": "https://storage.haruk.in/s5001.png",
+  "3109M": "https://storage.haruk.in/s5001.png",
+  "3111M": "https://storage.haruk.in/s5001.png",
+  "3113M": "https://storage.haruk.in/s5001.png",
+  "3115M": "https://storage.haruk.in/s5001.png",
+  "3117M": "https://storage.haruk.in/s5001.png",
+  "3119M": "https://storage.haruk.in/s5001.png",
+  "3121M": "https://storage.haruk.in/s5001.png",
+  "3123M": "https://storage.haruk.in/s5001.png",
+  "3125M": "https://storage.haruk.in/s5001.png",
+  "3127M": "https://storage.haruk.in/s5001.png",
+  "3129M": "https://storage.haruk.in/s5001.png",
+  "3131M": "https://storage.haruk.in/s5001.png",
+  "3133M": "https://storage.haruk.in/s5001.png",
+  "3135M": "https://storage.haruk.in/s5001.png",
+  "3137M": "https://storage.haruk.in/s5001.png",
+  "3139M": "https://storage.haruk.in/s5001.png",
+  "3141M": "https://storage.haruk.in/s5001.png",
+  "3143M": "https://storage.haruk.in/s5001.png",
+  "3145M": "https://storage.haruk.in/s5001.png",
+  "3147M": "https://storage.haruk.in/s5001.png",
+  "3149M": "https://storage.haruk.in/s5001.png",
+  "3151M": "https://storage.haruk.in/s5001.png",
+  "3153M": "https://storage.haruk.in/s5001.png",
+  "3155M": "https://storage.haruk.in/s5001.png",
+  "3157M": "https://storage.haruk.in/s5001.png",
+  "3159M": "https://storage.haruk.in/s5001.png",
+  "3161M": "https://storage.haruk.in/s5001.png",
+  "3163M": "https://storage.haruk.in/s5001.png",
+  "3165M": "https://storage.haruk.in/s5001.png",
+  "3167M": "https://storage.haruk.in/s5001.png",
+  "3169M": "https://storage.haruk.in/s5001.png",
+  "3175M": "https://storage.haruk.in/s5001.png",
+  // マリンライナー(快速)
+  "3102M": "https://storage.haruk.in/s5001k.png",
+  "3101M": "https://storage.haruk.in/s5001k.png",
+  "3103M": "https://storage.haruk.in/s5001k.png",
+  "3171M": "https://storage.haruk.in/s5001k.png",
+  "3173M": "https://storage.haruk.in/s5001k.png",
+
+  // ── サンライズ瀬戸 ─────────────────────────────────
+  "5032M": "https://storage.haruk.in/w285.png",
+  "5031M": "https://storage.haruk.in/w285.png",
+  "8041M": "https://storage.haruk.in/w285.png",
+  "8031M": "https://storage.haruk.in/w285.png",
+
+  // ── 宇和海 ─────────────────────────────────────────
+  // 2000 ノーマル
+  "1052D": "https://storage.haruk.in/s2000_uwa.png",
+  "1054D": "https://storage.haruk.in/s2000_uwa.png",
+  "1056D": "https://storage.haruk.in/s2000_uwa.png",
+  "1060D": "https://storage.haruk.in/s2000_uwa.png",
+  "1062D": "https://storage.haruk.in/s2000_uwa.png",
+  "1064D": "https://storage.haruk.in/s2000_uwa.png",
+  "1068D": "https://storage.haruk.in/s2000_uwa.png",
+  "1070D": "https://storage.haruk.in/s2000_uwa.png",
+  "1072D": "https://storage.haruk.in/s2000_uwa.png",
+  "1076D": "https://storage.haruk.in/s2000_uwa.png",
+  "1078D": "https://storage.haruk.in/s2000_uwa.png",
+  "1080D": "https://storage.haruk.in/s2000_uwa.png",
+  "1082D": "https://storage.haruk.in/s2000_uwa.png",
+  "1051D": "https://storage.haruk.in/s2000_uwa.png",
+  "1055D": "https://storage.haruk.in/s2000_uwa.png",
+  "1057D": "https://storage.haruk.in/s2000_uwa.png",
+  "1061D": "https://storage.haruk.in/s2000_uwa.png",
+  "1063D": "https://storage.haruk.in/s2000_uwa.png",
+  "1065D": "https://storage.haruk.in/s2000_uwa.png",
+  "1069D": "https://storage.haruk.in/s2000_uwa.png",
+  "1071D": "https://storage.haruk.in/s2000_uwa.png",
+  "1073D": "https://storage.haruk.in/s2000_uwa.png",
+  "1075D": "https://storage.haruk.in/s2000_uwa.png",
+  "1077D": "https://storage.haruk.in/s2000_uwa.png",
+  "1079D": "https://storage.haruk.in/s2000_uwa.png",
+  "1081D": "https://storage.haruk.in/s2000_uwa.png",
+  // 2000 アンパン
+  "1058D": AP,
+  "1066D": AP,
+  "1074D": AP,
+  "1053D": AP,
+  "1059D": AP,
+  "1067D": AP,
+
+  // ── しまんと ───────────────────────────────────────
+  "2002D": "https://storage.haruk.in/s2000_smn.png",
+  "2004D": "https://storage.haruk.in/s2000_smn.png",
+  "2001D": "https://storage.haruk.in/s2000_smn.png",
+  "2003D": "https://storage.haruk.in/s2000_smn.png",
+
+  // ── あしずり ───────────────────────────────────────
+  // 2000
+  "2074D": "https://storage.haruk.in/s2000_smn.png",
+  "2076D": "https://storage.haruk.in/s2000_smn.png",
+  "2080D": "https://storage.haruk.in/s2000_smn.png",
+  "2082D": "https://storage.haruk.in/s2000_smn.png",
+  "2071D": "https://storage.haruk.in/s2000_smn.png",
+  "2073D": "https://storage.haruk.in/s2000_smn.png",
+  "2079D": "https://storage.haruk.in/s2000_smn.png",
+  "2081D": "https://storage.haruk.in/s2000_smn.png",
+  // 2700
+  "2072D": "https://storage.haruk.in/s2700_asi.png",
+  "2078D": "https://storage.haruk.in/s2700_asi.png",
+  "2084D": "https://storage.haruk.in/s2700_asi.png",
+  "2075D": "https://storage.haruk.in/s2700_asi.png",
+  "2077D": "https://storage.haruk.in/s2700_asi.png",
+  "2083D": "https://storage.haruk.in/s2700_asi.png",
+
+  // ── 剣山 ───────────────────────────────────────────
+  "4002D": "https://storage.haruk.in/s185tu.png",
+  "4004D": "https://storage.haruk.in/s185tu.png",
+  "4006D": "https://storage.haruk.in/s185tu.png",
+  "4001D": "https://storage.haruk.in/s185tu.png",
+  "4003D": "https://storage.haruk.in/s185tu.png",
+  "4005D": "https://storage.haruk.in/s185tu.png",
+  "4007D": "https://storage.haruk.in/s185tu.png",
+
+  // ── よしのがわトロッコ ─────────────────────────────
+  "8452D": "https://storage.haruk.in/s185to_ai.png",
+  "8451D": "https://storage.haruk.in/s185to_ai.png",
+
+  // ── 岡山高松/琴平アントロ ──────────────────────────
+  "8176D": "https://storage.haruk.in/s32to4.png",
+  "8179D": "https://storage.haruk.in/s32to4.png",
+  "8277D": "https://storage.haruk.in/s32to4.png",
+  "8278D": "https://storage.haruk.in/s32to4.png",
+
+  // ── 千年ものがたり ─────────────────────────────────
+  "8021D": "https://storage.haruk.in/s185mm1.png",
+  "8022D": "https://storage.haruk.in/s185mm1.png",
+
+  // ── 夜明けものがたり ───────────────────────────────
+  "8082D": "https://storage.haruk.in/s185ym1.png",
+  "8083D": "https://storage.haruk.in/s185ym1.png",
+  "8073D": "https://storage.haruk.in/s185ym1.png",
+  "8074D": "https://storage.haruk.in/s185ym1.png",
+
+  // ── ラ・マルどこまでも ─────────────────────────────
+  "9253M": "https://storage.haruk.in/w213w.png",
+  "9256M": "https://storage.haruk.in/w213w.png",
+
+  // ── 貨物 ───────────────────────────────────────────
+  "74": "https://storage.haruk.in/ef210a.png",
+  "75": "https://storage.haruk.in/ef210a.png",
+  "70": "https://storage.haruk.in/ef210a.png",
+  "71": "https://storage.haruk.in/ef210a.png",
+  "73": "https://storage.haruk.in/ef210a.png",
+  "76": "https://storage.haruk.in/ef210a.png",
+  "3070": "https://storage.haruk.in/ef210a.png",
+  "3071": "https://storage.haruk.in/ef210a.png",
+  "3072": "https://storage.haruk.in/ef210a.png",
+  "3073": "https://storage.haruk.in/ef210a.png",
+  "3076": "https://storage.haruk.in/ef210a.png",
+  "3077": "https://storage.haruk.in/ef210a.png",
+  "3078": "https://storage.haruk.in/ef210a.png",
+  "3079": "https://storage.haruk.in/ef210a.png",
+  "8070": "https://storage.haruk.in/ef210a.png",
+  "8071": "https://storage.haruk.in/ef210a.png",
+  "8072": "https://storage.haruk.in/ef210a.png",
+  "8077": "https://storage.haruk.in/ef210a.png",
+
+  // ── 伊予灘ものがたり ───────────────────────────────
+  "8091D": "https://storage.haruk.in/s185iyor.png",
+  "8093D": "https://storage.haruk.in/s185iyor.png",
+  "8092D": "https://storage.haruk.in/s185iyoy.png",
+  "8094D": "https://storage.haruk.in/s185iyoy.png",
+
+  // ── 高徳線・徳島線・牟岐線・鳴門線 キハ40・47 ────
+  "4303D": "https://storage.haruk.in/s40.png",
+  "371D": "https://storage.haruk.in/s40.png",
+  "316D": "https://storage.haruk.in/s40.png",
+  "362D": "https://storage.haruk.in/s40.png",
+  "4376D": "https://storage.haruk.in/s40.png",
+  "951D": "https://storage.haruk.in/s40.png",
+  "953D": "https://storage.haruk.in/s40.png",
+  "955D": "https://storage.haruk.in/s40.png",
+  "973D": "https://storage.haruk.in/s40.png",
+  "975D": "https://storage.haruk.in/s40.png",
+  "977D": "https://storage.haruk.in/s40.png",
+  "979D": "https://storage.haruk.in/s40.png",
+  "981D": "https://storage.haruk.in/s40.png",
+  "950D": "https://storage.haruk.in/s40.png",
+  "968D": "https://storage.haruk.in/s40.png",
+  "970D": "https://storage.haruk.in/s40.png",
+  "972D": "https://storage.haruk.in/s40.png",
+  "974D": "https://storage.haruk.in/s40.png",
+  "976D": "https://storage.haruk.in/s40.png",
+  "980D": "https://storage.haruk.in/s40.png",
+  "982D": "https://storage.haruk.in/s40.png",
+
+  // ── 1000形 ─────────────────────────────────────────
+  "4311D": "https://storage.haruk.in/s1000.png",
+  "363D": "https://storage.haruk.in/s1000.png",
+  "356D": "https://storage.haruk.in/s1000.png",
+  "4374D": "https://storage.haruk.in/s1000.png",
+  "433D": "https://storage.haruk.in/s1000.png",
+  "4447D": "https://storage.haruk.in/s1000.png",
+  "451D": "https://storage.haruk.in/s1000.png",
+  "450D": "https://storage.haruk.in/s1000.png",
+  "4458D": "https://storage.haruk.in/s1000.png",
+  "474D": "https://storage.haruk.in/s1000.png",
+
+  // ── 1200形 ─────────────────────────────────────────
+  "4301D": "https://storage.haruk.in/s1200n.png",
+  "4327D": "https://storage.haruk.in/s1200n.png",
+  "4329D": "https://storage.haruk.in/s1200n.png",
+  "4343D": "https://storage.haruk.in/s1200n.png",
+  "353D": "https://storage.haruk.in/s1200n.png",
+  "355D": "https://storage.haruk.in/s1200n.png",
+  "367D": "https://storage.haruk.in/s1200n.png",
+  "310D": "https://storage.haruk.in/s1200n.png",
+  "4326D": "https://storage.haruk.in/s1200n.png",
+  "4334D": "https://storage.haruk.in/s1200n.png",
+  "4342D": "https://storage.haruk.in/s1200n.png",
+  "358D": "https://storage.haruk.in/s1200n.png",
+  "364D": "https://storage.haruk.in/s1200n.png",
+  "4453D": "https://storage.haruk.in/s1200n.png",
+  "4455D": "https://storage.haruk.in/s1200n.png",
+  "4457D": "https://storage.haruk.in/s1200n.png",
+  "463D": "https://storage.haruk.in/s1200n.png",
+  "475D": "https://storage.haruk.in/s1200n.png",
+  "477D": "https://storage.haruk.in/s1200n.png",
+  "485D": "https://storage.haruk.in/s1200n.png",
+  "4430D": "https://storage.haruk.in/s1200n.png",
+  "434D": "https://storage.haruk.in/s1200n.png",
+  "438D": "https://storage.haruk.in/s1200n.png",
+  "4460D": "https://storage.haruk.in/s1200n.png",
+  "4464D": "https://storage.haruk.in/s1200n.png",
+  "4466D": "https://storage.haruk.in/s1200n.png",
+  "478D": "https://storage.haruk.in/s1200n.png",
+  "484D": "https://storage.haruk.in/s1200n.png",
+  "957D": "https://storage.haruk.in/s1200n.png",
+  "4959D": "https://storage.haruk.in/s1200n.png",
+  "4963D": "https://storage.haruk.in/s1200n.png",
+  "4967D": "https://storage.haruk.in/s1200n.png",
+  "4971D": "https://storage.haruk.in/s1200n.png",
+  "952D": "https://storage.haruk.in/s1200n.png",
+  "4954D": "https://storage.haruk.in/s1200n.png",
+  "4958D": "https://storage.haruk.in/s1200n.png",
+  "4962D": "https://storage.haruk.in/s1200n.png",
+  "4966D": "https://storage.haruk.in/s1200n.png",
+
+  // ── 半定期臨時 ─────────────────────────────────────
+  "9174M": "https://storage.haruk.in/s5001.png",
+  "9395D": "https://storage.haruk.in/s1500.png",
+};
+
+/** 正規表現パターンマッチング (完全一致で未ヒットの場合に評価) */
+export const TRAIN_ICON_REGEX: Array<{ pattern: string; url: string }> = [
+  // 高徳線 普通
+  { pattern: "^(4|5)3\\d\\dD$", url: "https://storage.haruk.in/s1500.png" },
+  { pattern: "^3\\d\\dD$", url: "https://storage.haruk.in/s1500.png" },
+  // 徳島線 普通
+  { pattern: "^(4|5)4\\d\\dD$", url: "https://storage.haruk.in/s1500.png" },
+  { pattern: "^4\\d\\dD$", url: "https://storage.haruk.in/s1500.png" },
+  // 鳴門線 普通
+  {
+    pattern: "^(4|5)9(5|6|7|8)\\dD$",
+    url: "https://storage.haruk.in/s1500.png",
+  },
+  { pattern: "^9(5|6|7|8)\\dD$", url: "https://storage.haruk.in/s1500.png" },
+];

lib/webview/trainTypeConfig.ts

@@ -0,0 +1,35 @@
+/**
+ * 列車種別ごとの表示設定
+ *
+ * - typeColor  : nameReplace で使う種別ラベルの文字色
+ * - borderColor: setNewTrainItem で使う枠線色
+ * - bgColor    : setNewTrainItem で使う背景色
+ * - label      : 種別ラベル文字列
+ * - isWanman   : ワンマン列車かどうか
+ */
+export interface TrainTypeConfig {
+  label: string;
+  typeColor: string;
+  borderColor: string;
+  bgColor: string;
+  isWanman: boolean;
+}
+
+export const TRAIN_TYPE_CONFIG: Record<string, TrainTypeConfig> = {
+  Normal:            { label: "普通",     typeColor: "black",                 borderColor: "black",                 bgColor: "#ffffffcc", isWanman: false },
+  OneMan:            { label: "普通",     typeColor: "black",                 borderColor: "black",                 bgColor: "#ffffffcc", isWanman: true  },
+  Rapid:             { label: "快速",     typeColor: "rgba(0, 140, 255, 1)",  borderColor: "rgba(0, 140, 255, 1)",  bgColor: "#ffffffcc", isWanman: false },
+  OneManRapid:       { label: "快速",     typeColor: "rgba(0, 140, 255, 1)",  borderColor: "rgba(0, 140, 255, 1)",  bgColor: "#ffffffcc", isWanman: true  },
+  LTDEXP:            { label: "特急",     typeColor: "red",                   borderColor: "red",                   bgColor: "#ffffffcc", isWanman: false },
+  NightLTDEXP:       { label: "寝台特急", typeColor: "#d300b0ff",             borderColor: "#d300b0ff",             bgColor: "#ffffffcc", isWanman: false },
+  SPCL:              { label: "臨時",     typeColor: "#008d07ff",             borderColor: "#008d07ff",             bgColor: "#ffffffcc", isWanman: false },
+  SPCL_Normal:       { label: "臨時",     typeColor: "#008d07ff",             borderColor: "#008d07ff",             bgColor: "#ffffffcc", isWanman: false },
+  SPCL_Rapid:        { label: "臨時快速", typeColor: "rgba(0, 81, 255, 1)",   borderColor: "#0051ffff",             bgColor: "#ffffffcc", isWanman: false },
+  SPCL_EXP:          { label: "臨時特急", typeColor: "#a52e2eff",             borderColor: "#a52e2eff",             bgColor: "#ffffffcc", isWanman: false },
+  Party:             { label: "団体臨時", typeColor: "#ff7300ff",             borderColor: "#ff7300ff",             bgColor: "#ffd0a9ff", isWanman: false },
+  Freight:           { label: "貨物",     typeColor: "#00869ecc",             borderColor: "#00869ecc",             bgColor: "#c7c7c7cc", isWanman: false },
+  Forwarding:        { label: "回送",     typeColor: "#727272cc",             borderColor: "#727272cc",             bgColor: "#c7c7c7cc", isWanman: false },
+  Trial:             { label: "試運転",   typeColor: "#727272cc",             borderColor: "#727272cc",             bgColor: "#c7c7c7cc", isWanman: false },
+  Construction:      { label: "工事",     typeColor: "#727272cc",             borderColor: "#727272cc",             bgColor: "#c7c7c7cc", isWanman: false },
+  FreightForwarding: { label: "単機回送", typeColor: "#727272cc",             borderColor: "#727272cc",             bgColor: "#c7c7c7cc", isWanman: false },
+};

stateBox/useTrainMenu.tsx

@@ -39,6 +39,8 @@ const initialState = {
   setTrainMenu: (e) => {},
   updatePermission: false,
   setUpdatePermission: (e) => {},
+  /** 各情報ソースの利用権限 */
+  dataSourcePermission: { unyohub: false } as { unyohub: boolean },
   injectJavascript: "",
 };
 
@@ -62,20 +64,23 @@ export const TrainMenuProvider: FC<props> = ({ children }) => {
   const [stationMenu, setStationMenu] = useState<boolType>(undefined);
   const [LoadError, setLoadError] = useState(false);
 
-  //更新権限所有確認
+  //更新権限所有確認・情報ソース別利用権限（将来ロールが増えたらここに足す）
   const [updatePermission, setUpdatePermission] = useState(false);
+  const [dataSourcePermission, setDataSourcePermission] = useState<{ unyohub: boolean }>({ unyohub: false });
   useEffect(() => {
+    if (!expoPushToken) return;
     fetch(
-      "https://n8n.haruk.in/webhook/data-edit-permission?token=" + expoPushToken
+      `https://jr-shikoku-backend-api-v1.haruk.in/check-permission?user_id=${expoPushToken}`
     )
       .then((res) => res.json())
       .then((res) => {
-        if (res.data == true) {
-          setUpdatePermission(true);
-        } else {
-          setUpdatePermission(false);
-        }
-      });
+        const role: string = res.permission ?? "";
+        setUpdatePermission(role === "administrator");
+        setDataSourcePermission({
+          unyohub: role === "administrator" || role === "unyoHubEditor",
+        });
+      })
+      .catch(() => {});
   }, [expoPushToken]);
 
   //列車情報表示関連
@@ -90,15 +95,19 @@ export const TrainMenuProvider: FC<props> = ({ children }) => {
 
   //GUIデザインベース
   const [uiSetting, setUiSetting] = useState("tokyo");
+  
+  // 鉄道運用Hub使用設定
+  const [useUnyohubSetting, setUseUnyohubSetting] = useState("false");
 
   //地図表示テキスト
-  const injectJavascript = injectJavascriptData(
+  const injectJavascript = injectJavascriptData({
     mapSwitch,
     iconSetting,
     stationMenu,
     trainMenu,
-    uiSetting
-  );
+    uiSetting,
+    useUnyohub: useUnyohubSetting,
+  });
 
   useEffect(() => {
     //列車アイコンスイッチ
@@ -111,6 +120,8 @@ export const TrainMenuProvider: FC<props> = ({ children }) => {
     ASCore({ k: STORAGE_KEYS.TRAIN_SWITCH, s: setTrainMenu, d: "true", u: true });
     //GUIデザインベーススイッチ
     ASCore({ k: STORAGE_KEYS.UI_SETTING, s: setUiSetting, d: "tokyo", u: true });
+    //鉄道運用Hubスイッチ
+    ASCore({ k: STORAGE_KEYS.USE_UNYOHUB, s: setUseUnyohubSetting, d: "false", u: true });
   }, []);
 
   return (
@@ -136,6 +147,7 @@ export const TrainMenuProvider: FC<props> = ({ children }) => {
         setTrainMenu,
         updatePermission,
         setUpdatePermission,
+        dataSourcePermission,
         injectJavascript,
       }}
     >

stateBox/useUnyohub.tsx

@@ -0,0 +1,116 @@
+import { useState, useEffect } from "react";
+import { AS } from "../storageControl";
+import { STORAGE_KEYS } from "@/constants";
+import { API_ENDPOINTS } from "@/constants";
+import type { UnyohubResponse, UnyohubData } from "@/types/unyohub";
+
+type UnyohubHook = {
+  /** 鉄道運用Hub使用設定 */
+  useUnyohub: boolean;
+  /** 鉄道運用Hubデータ */
+  unyohubData: UnyohubResponse;
+  /** 指定した列番の運用情報を文字列で取得（後方互換） */
+  getUnyohubByTrainNumber: (trainNumber: string) => string | null;
+  /** 指定した列番に紐づく UnyohubData の配列を取得 */
+  getUnyohubEntriesByTrainNumber: (trainNumber: string) => UnyohubData[];
+  /** 鉄道運用Hub使用設定を更新 */
+  setUseUnyohub: (value: boolean) => void;
+};
+
+export const useUnyohub = (): UnyohubHook => {
+  const [useUnyohub, setUseUnyohubState] = useState(false);
+  const [unyohubData, setUnyohubData] = useState<UnyohubResponse>([]);
+
+  // 初期読み込み
+  useEffect(() => {
+    AS.getItem(STORAGE_KEYS.USE_UNYOHUB).then((value) => {
+      setUseUnyohubState(value === true || value === "true");
+    });
+    
+    AS.getItem(STORAGE_KEYS.UNYOHUB_DATA).then((value) => {
+      if (value) {
+        try {
+          setUnyohubData(JSON.parse(value as string));
+        } catch (e) {
+          console.error("Failed to parse unyohub data", e);
+        }
+      }
+    });
+  }, []);
+
+  // データ更新処理
+  useEffect(() => {
+    if (!useUnyohub) return;
+
+    const fetchUnyohubData = async () => {
+      try {
+        // キャッシュバスティング用にタイムスタンプを追加
+        const cacheBuster = '?_=' + Date.now();
+        const response = await fetch(API_ENDPOINTS.UNYOHUB_DATA + cacheBuster);
+        const data = await response.json();
+        setUnyohubData(data);
+        await AS.setItem(STORAGE_KEYS.UNYOHUB_DATA, JSON.stringify(data));
+      } catch (error) {
+        console.error("Failed to fetch unyohub data", error);
+      }
+    };
+
+    fetchUnyohubData();
+    
+    // 10分ごとにデータを更新
+    const interval = setInterval(fetchUnyohubData, 10 * 60 * 1000);
+    
+    return () => clearInterval(interval);
+  }, [useUnyohub]);
+
+  // 列番から運用番号を取得（複数ある場合はposition_forward順）
+  const getUnyohubByTrainNumber = (trainNumber: string): string | null => {
+    if (!useUnyohub || unyohubData.length === 0) return null;
+    
+    const foundUnyos: Array<{ formations: string; position_forward: number; position_rear: number }> = [];
+    
+    for (const unyo of unyohubData) {
+      if (!unyo.trains) continue;
+      const found = unyo.trains.find(train => train.train_number === trainNumber);
+      if (found) {
+        foundUnyos.push({
+          formations: unyo.formations,
+          position_forward: found.position_forward,
+          position_rear: found.position_rear,
+        });
+      }
+    }
+    
+    if (foundUnyos.length === 0) return null;
+    
+    // position_forward順にソート
+    foundUnyos.sort((a, b) => a.position_forward - b.position_forward);
+    
+    // 「運用番号(編成位置)」の形式で結合
+    return foundUnyos
+      .map(u => `${u.formations}(${u.position_forward}-${u.position_rear})`)
+      .join(', ');
+  };
+
+  // 列番に紐づく UnyohubData エントリをすべて取得
+  const getUnyohubEntriesByTrainNumber = (trainNumber: string): UnyohubData[] => {
+    if (!useUnyohub || unyohubData.length === 0) return [];
+    return unyohubData.filter(
+      (unyo) => unyo.trains?.some((t) => t.train_number === trainNumber)
+    );
+  };
+
+  // 設定を更新
+  const setUseUnyohub = (value: boolean) => {
+    setUseUnyohubState(value);
+    AS.setItem(STORAGE_KEYS.USE_UNYOHUB, value.toString());
+  };
+
+  return {
+    useUnyohub,
+    unyohubData,
+    getUnyohubByTrainNumber,
+    getUnyohubEntriesByTrainNumber,
+    setUseUnyohub,
+  };
+};

types/unyohub.ts

@@ -0,0 +1,35 @@
+/**
+ * 鉄道運用Hub APIのデータ型定義
+ */
+
+export type UnyohubTrain = {
+  train_number: string;
+  line_id: string;
+  first_departure_time: string;
+  final_arrival_time: string;
+  starting_station: string;
+  terminal_station: string;
+  position_forward: number;
+  position_rear: number;
+  direction: string;
+};
+
+export type UnyohubData = {
+  formations: string;
+  posts_count: number;
+  from_beginner: boolean;
+  trains: UnyohubTrain[];
+  starting_location: string;
+  starting_track: string;
+  starting_time: string;
+  terminal_location: string;
+  terminal_track: string;
+  ending_time: string;
+  car_count: number;
+  min_car_count: number;
+  max_car_count: number;
+  main_color: string;
+  comment: string | null;
+};
+
+export type UnyohubResponse = UnyohubData[];

utils/seUtils.ts

@@ -18,13 +18,13 @@ const SE_MAPPING: Record<string, SeStringResult> = {
   "頃編": ["頃", "community"],
   // 運休系
   "休編": ["運休", "community"],  // 後方互換性のため残す
-  "休発": ["出発(運休)", "normal"],
-  "休着": ["到着(運休)", "normal"],
-  "休発編": ["出発(運休)", "community"],
-  "休着編": ["到着(運休)", "community"],
-  "通休編": ["通過(運休)", "community"],
-  "通発休編": ["出発(運休)", "community"],
-  "通着休編": ["到着(運休)", "community"],
+  "休発": ["出発", "normal"],
+  "休着": ["到着", "normal"],
+  "休発編": ["出発", "community"],
+  "休着編": ["到着", "community"],
+  "通休編": ["通過", "community"],
+  "通発休編": ["出発", "community"],
+  "通着休編": ["到着", "community"],
 };
 
 /**