feat: Update background image URL in stylesheet.css and add lazy load…

…ing for images in TalkListContent

fresh.gen.ts

@@ -6,6 +6,7 @@ import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
 import * as $_middleware from "./routes/_middleware.ts";
 import * as $addFriend_index from "./routes/addFriend/index.tsx";
+import * as $api_v2_client_bgimage from "./routes/api/v2/client/bgimage.ts";
 import * as $api_v2_client_block_server from "./routes/api/v2/client/block/server.ts";
 import * as $api_v2_client_block_user from "./routes/api/v2/client/block/user.ts";
 import * as $api_v2_client_chart from "./routes/api/v2/client/chart.ts";
@@ -110,6 +111,7 @@ const manifest = {
     "./routes/_app.tsx": $_app,
     "./routes/_middleware.ts": $_middleware,
     "./routes/addFriend/index.tsx": $addFriend_index,
+    "./routes/api/v2/client/bgimage.ts": $api_v2_client_bgimage,
     "./routes/api/v2/client/block/server.ts": $api_v2_client_block_server,
     "./routes/api/v2/client/block/user.ts": $api_v2_client_block_user,
     "./routes/api/v2/client/chart.ts": $api_v2_client_chart,

islands/TalkListContent.tsx

@@ -316,10 +316,13 @@ function OtherSettingPage({ settingPage }: { settingPage: any }) {
                 </div>
                 <div class="w-1/2 flex">
                   <label class="inline-flex items-center cursor-pointer mx-auto">
-                    <input type="checkbox" checked={addFriendById.value} class="sr-only peer"
-                    onChange={() => {
-                      addFriendById.value = !addFriendById.value;
-                    }}
+                    <input
+                      type="checkbox"
+                      checked={addFriendById.value}
+                      class="sr-only peer"
+                      onChange={() => {
+                        addFriendById.value = !addFriendById.value;
+                      }}
                     />
                     <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600">
                     </div>
@@ -332,10 +335,13 @@ function OtherSettingPage({ settingPage }: { settingPage: any }) {
                 </div>
                 <div class="w-1/2 flex">
                   <label class="inline-flex items-center cursor-pointer mx-auto">
-                    <input type="checkbox" checked={allowOtherServerUsers.value} class="sr-only peer"
-                    onChange={() => {
-                      allowOtherServerUsers.value = !allowOtherServerUsers.value;
-                    }}
+                    <input
+                      type="checkbox"
+                      checked={allowOtherServerUsers.value}
+                      class="sr-only peer"
+                      onChange={() => {
+                        allowOtherServerUsers.value = !allowOtherServerUsers.value;
+                      }}
                     />
                     <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600">
                     </div>
@@ -365,7 +371,7 @@ function OtherSettingPage({ settingPage }: { settingPage: any }) {
                     }),
                   });
                   const json = await res.json();
-                  if(!json.status) {
+                  if (!json.status) {
                     alert("エラーが発生しました");
                     return;
                   }

islands/setDefaultState.tsx

@@ -39,7 +39,7 @@ export default function setDefaultState({ state }: { state: AppStateType }) {
                 "",
                 "",
                 "/talk/" + state.friendid.value,
-              )
+              );
             }
           }
           break;

routes/api/v2/client/bgimage.ts

@@ -0,0 +1,46 @@
+export const handler = {
+  async GET(req: Request, ctx: any) {
+    const userid = ctx.state.data.userid;
+    try {
+      // ./backgroundImages/にある画像すべてを取得
+      const dirPath = "./backgroundImages";
+      const result = await readRandomImageFromDir(dirPath).catch(console.error);
+      return new Response(result, {
+        status: 200,
+        headers: {
+          "Content-Type": "image/jpeg",
+        },
+      });
+    } catch (e) {
+      console.log(e);
+      return new Response("Internal Server Error", { status: 500 });
+    }
+  },
+};
+
+// ランダムに数値を生成する関数
+function getRandomInt(max: number): number {
+  return Math.floor(Math.random() * max);
+}
+
+// 指定されたディレクトリからランダムな画像ファイルを読み込む関数
+async function readRandomImageFromDir(dir: string) {
+  const imageExtensions = [".jpg", ".jpeg", ".png", ".gif",".webp"];
+  const files: string[] = [];
+  for await (const dirEntry of Deno.readDir(dir)) {
+    if (dirEntry.isFile && imageExtensions.some((ext) => dirEntry.name.toLowerCase().endsWith(ext))) {
+      files.push(dirEntry.name);
+    }
+  }
+
+  if (files.length === 0) {
+    throw new Error("ディレクトリに画像ファイルがありません。");
+  }
+
+  const randomIndex = getRandomInt(files.length);
+  const randomFile = `${dir}/${files[randomIndex]}`;
+  const imageData = await Deno.readFile(randomFile);
+  return imageData;
+  // 画像の内容はバイナリデータとして出力されるため、ここでは内容の表示は省略
+  // 必要に応じて画像データを処理するコードを追加してください
+}

static/stylesheet.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 html,body {
     position: relative;
-    background-image: url("/main-bg2.png");
+    background-image: url("/api/v2/client/bgimage");
     background-size: cover;
     background-attachment: fixed;
 }