feat:WebSerialAPIに対応していないブラウザで開くと警告のモーダルを出す

i18n/locales/en.json

@@ -25,5 +25,7 @@
   "ソースコードを非表示": "Hide source code",
   "エラーの詳細を見る": "Click to view error details",
   "クリックして閉じる": "Click to close",
-  "コマンド": "Command"
+  "コマンド": "Command",
+  "このブラウザはサポートされていません": "This Browser is Not Supported",
+  "対応するブラウザを使ってください": "Your current browser does not support some of the features of this website.\nTo use all the features of this site, please use a desktop browser like Google Chrome or Microsoft Edge."
 }

i18n/locales/ja.json

@@ -25,5 +25,7 @@
   "ソースコードを非表示": "ソースコードを非表示",
   "エラーの詳細を見る": "エラーの詳細を見る",
   "クリックして閉じる": "クリックして閉じる",
-  "コマンド": "コマンド"
+  "コマンド": "コマンド",
+  "このブラウザはサポートされていません": "このブラウザはサポートされていません",
+  "対応するブラウザを使ってください": "お使いのブラウザではこのウェブサイトの一部機能が正しく動作しません。\nこのサイトのすべての機能を利用するためには、パソコンのGoogle ChromeやMicrosoft Edgeなどのブラウザを使用してください。"
 }

src/components/UnsupportedBrowserModal.tsx

@@ -0,0 +1,43 @@
+import { Modal, ModalClose, Sheet } from "@mui/joy";
+import { Typography } from "@mui/material";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export const UnsupportedBrowserModal = () => {
+  const [open, setOpen] = useState(true);
+  const [t] = useTranslation();
+
+  return (
+    <Modal
+      open={open}
+      onClose={() => setOpen(false)}
+      sx={{
+        width: "90%",
+        minWidth: "500px",
+        m: "auto",
+        alignContent: "center",
+      }}
+    >
+      <Sheet variant="outlined" sx={{ borderRadius: "0.5rem" }}>
+        <Typography
+          fontFamily={"'M PLUS Rounded 1c', sans-serif"}
+          variant="h4"
+          m={1}
+          alignItems={"center"}
+        >
+          {t("このブラウザはサポートされていません")}
+        </Typography>
+        <ModalClose variant="plain" sx={{ m: 0.5 }} />
+
+        <Typography
+          fontFamily={"'M PLUS Rounded 1c', sans-serif"}
+          fontSize="sm"
+          m={"0.5rem"}
+          whiteSpace={"pre-line"}
+        >
+          {t("対応するブラウザを使ってください")}
+        </Typography>
+      </Sheet>
+    </Modal>
+  );
+};

src/pages/home.tsx

@@ -22,6 +22,7 @@ import { CompilerSelector } from "components/CompilerSelector";
 import { ControlButton } from "components/ControlButton";
 import { Log } from "components/Log";
 import { SourceCodeTab } from "components/SourceCodeTab";
+import { UnsupportedBrowserModal } from "components/UnsupportedBrowserModal";
 import { useCompile } from "hooks/useCompile";
 import { useQuery } from "hooks/useQuery";
 import { Version, useVersions } from "hooks/useVersions";
@@ -225,8 +226,12 @@ export const Home = () => {
     i18n.changeLanguage(locale);
   }, [i18n]);
 
+  // WebSerialAPIに対応するブラウザかどうかを確認する
+  const supported = "serial" in navigator;
+
   return (
     <>
+      {!supported && <UnsupportedBrowserModal />}
       <Box
         sx={{
           mb: "0.5rem",