docs: add post about RemixでファイルをアップロードしたりダウンロードできるWebアプリを作った

Author: oriverk

.contents/card-links.json

@@ -53,5 +53,20 @@
     "title": "Biome",
     "description": "Format, lint, and more in a fraction of a second.",
     "image": "https://biomejs.dev/img/og.png?v=2"
+  },
+  "https://oriverk.dev/blog/20240109-publish-uploader-site/": {
+    "title": "ファイルをアップロード・ダウンロードできるWebアプリを公開しました | oriverk.dev",
+    "description": "",
+    "image": "https://oriverk.dev/api/og/blog/20240109-publish-uploader-site.webp"
+  },
+  "https://zenn.dev/oriverk/articles/2914b8bff52476": {
+    "title": "RemixでFirestore Storageへファイルアップロード機能を作る",
+    "description": "",
+    "image": "https://res.cloudinary.com/zenn/image/upload/s--tbra3LP4--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:Remix%25E3%2581%25A7Firestore%2520Storage%25E3%2581%25B8%25E3%2583%2595%25E3%2582%25A1%25E3%2582%25A4%25E3%2583%25AB%25E3%2582%25A2%25E3%2583%2583%25E3%2583%2597%25E3%2583%25AD%25E3%2583%25BC%25E3%2583%2589%25E6%25A9%259F%25E8%2583%25BD%25E3%2582%2592%25E4%25BD%259C%25E3%2582%258B%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:oriverk%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2pWb1Vhc3I2TG1WZ2ZycnEtRlhNUVhya3VSdm85OWFMWkNtS2xEPXMyNTAtYw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png"
+  },
+  "https://github.com/oriverk/remix-uploader": {
+    "title": "GitHub - oriverk/remix-uploader: web app to upload and download file",
+    "description": "web app to upload and download file. Contribute to oriverk/remix-uploader development by creating an account on GitHub.",
+    "image": "https://repository-images.githubusercontent.com/893686198/02d16ff4-cea4-4aa1-ba29-c9a649f0d30a"
   }
 }

src/content/blog/20240109-publish-uploader-site.md

@@ -13,7 +13,7 @@ published: true
 
 趣味関係で開発・メンテナンスしている JS 製のツールを GoogleDive で配布していたのですが、代替サービスを探していました。探す中で作れそうだ・作ってみたいと思い、2022 年 8 月にサイトを公開しました。
 
-※自ツール配布のためだけのサイトであり、また悪意のあるファイルを他者に UL されると困るので、サイト URL と GitHub リポジトリは非公開です。
+※自ツール配布のためだけのサイトなので、GitHub リポジトリは非公開です。
 
 ### どんなサービス
 

src/content/blog/20241027-react-hooks.md

@@ -0,0 +1,125 @@
+---
+create: '2024-10-27'
+update: '2024-10-27'
+title: 'React hooks'
+tags: [react]
+published: true
+---
+
+only for memo
+
+## React hooks
+
+### useDetectAdBlock
+
+```ts
+// [aruniverse/adblock-detect-react](https://github.com/aruniverse/adblock-detect-react/tree/master)
+import { useEffect, useState } from "react";
+
+export const useDetectAdBlock = () => {
+ const [adBlockDetected, setAdBlockDetected] = useState(false);
+
+ useEffect(() => {
+  // grab a domain from https://github1s.com/gorhill/uBlock/blob/master/docs/tests/hostname-pool.js
+  const url = "https://www3.doubleclick.net";
+  fetch(url, {
+   method: "HEAD",
+   mode: "no-cors",
+   cache: "no-store",
+  })
+   .then(({ redirected }) => {
+    if (redirected) setAdBlockDetected(true);
+   })
+   .catch(() => {
+    setAdBlockDetected(true);
+   });
+ }, []);
+
+ return adBlockDetected;
+};
+
+```
+
+### useCopyToClipboard
+
+```ts
+import { useState } from "react";
+
+type CopiedValue = string | null;
+type CopyFn = (text: string) => Promise<boolean>;
+
+export function useCopyToClipboard(): [CopiedValue, CopyFn] {
+ const [copiedText, setCopiedText] = useState<CopiedValue>(null);
+
+ const copy: CopyFn = async (text) => {
+  if (!navigator?.clipboard) {
+   console.warn("Clipboard not supported");
+   return false;
+  }
+
+  // Try to save to clipboard then save it in the state if worked
+  try {
+   await navigator.clipboard.writeText(text);
+   setCopiedText(text);
+   return true;
+  } catch (error) {
+   console.warn("Copy failed", error);
+   setCopiedText(null);
+   return false;
+  }
+ };
+
+ return [copiedText, copy];
+}
+
+```
+
+## crypto.ts
+
+```ts
+// [フロントエンド開発者のためのハッシュ関数入門](https://zenn.dev/bosushi/articles/3353a1b28ef93b#5.-%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%81%A7%E3%81%AE%E3%83%8F%E3%83%83%E3%82%B7%E3%83%A5%E9%96%A2%E6%95%B0%E3%81%AE%E9%81%A9%E7%94%A8)
+
+// 仮パスワードとハッシュ値を取得
+// const params = new URLSearchParams(window.location.search);
+// const temporaryPassword = params.get('tempPass');
+// const hashedPassword = params.get('hash');
+
+// ハッシュ関数（SHA-256）を用いて仮パスワードをハッシュ化
+const encoder = new TextEncoder();
+export async function getHash(tempPass: string) {
+ const msgUint8 = encoder.encode(tempPass);
+ const hashBuffer = await crypto.subtle.digest("SHA-256", msgUint8);
+ const binaryArray = new Uint8Array(hashBuffer);
+ const hashArray = Array.from(binaryArray);
+ const hashedPass = hashArray
+  .map((b) => b.toString(16).padStart(2, "0"))
+  .join("");
+ return hashedPass;
+}
+
+/**
+ * compare password; if true, same
+ * @param temporaryPassword
+ * @param hashedPassword
+ * @returns
+ */
+export async function comparePassword(
+ temporaryPassword: string,
+ hashedPassword: string,
+) {
+ const hashedTempPass = await getHash(temporaryPassword);
+ return hashedTempPass === hashedPassword;
+}
+
+// getHash(temporaryPassword).then((hashedTempPass) => {
+//   // 仮パスワードのハッシュ値とURLから取得したハッシュ値を比較
+//   if(hashedTempPass === hashedPassword) {
+//     // 新しいパスワードの入力と更新処理を実行
+//     const newPassword = prompt("新しいパスワードを入力してください：");
+//     // updatePassword(newPassword);  // updatePasswordはサーバーと通信してパスワードを更新する関数とする
+//   } else {
+//     alert("URLが無効です。");
+//   }
+// });
+
+```

src/content/blog/20241212-publish-remix-uploader-site/103212.png

@@ -0,0 +1,160 @@
+---
+title: RemixでファイルをアップロードしたりダウンロードできるWebアプリを作った
+create: "2024-12-13"
+update: "2024-12-13"
+tags: [remix, firebase, cloudrun]
+description: "React製のファイルアップロードサイトをRemixに変更しました"
+published: true
+---
+
+2022年8月に公開したファイルのアップロード・ダウンロードができるReact製Webアプリを、Remix製に変更しました。下は当該サイトについて2024年1月に投稿したものです。
+
+https://oriverk.dev/blog/20240109-publish-uploader-site/
+
+※以降、UL＝アップロード、DL＝ダウンロードと省略します。
+
+## サービスの機能
+
+このWebアプリは、ユーザがファイルをULし、またDL出来る仕組みを提供します。ULにはユーザ登録が必要ですが、DLはユーザ登録を必要とせず、ULした人のIDを知っている人であれば誰でもアクセス可能です。
+
+ただし、当Webアプリは私が趣味関係で開発・メンテナンスしているJS製ツールを頒布するために作成したものなので、ユーザ登録及びファイルアップロードは私以外には出来ない様に制限しています。
+
+- ユーザ認証機能
+  - 新規登録
+    - FirebaseAuthenticationを用いて、メールアドレスとパスワードでユーザ登録
+    - 登録ユーザに関するその他の情報はFirebaseFirestoreに保存される
+  - ログイン・ログアウト
+    - 登録済みユーザはログインしてファイルを管理可能
+  - セッション管理
+    - セッションは一定時間で期限切れとなり、再ログインを促す
+- ファイルアップロード機能
+  - 認証要件
+    - ULを行うためには、メールアドレスとパスワードを用いたユーザ登録とログインが必要
+  - UL可能ファイル
+    - 拡張子やファイルサイズに制限を設ける（`.zip`ファイルのみに制限
+  - アップロード後の処理
+    - ファイルはFirebaseStorageに保存される
+    - ファイルのメタデータおよび説明文などはFirebaseFirestoreに保存される
+- ファイルダウンロード機能
+  - 認証不要
+    - DLはユーザ登録不要
+- ファイル管理機能
+  - 個別管理
+    - 各ユーザは自身がULしたファイルのみを一覧で確認し、説明文などを編集できる。
+  - 削除機能
+    - ユーザは自身がULしたファイルを論理削除できる
+
+## 使用した技術
+
+今まではファイルとその関連情報の送受信をクライアントサイドで行っていたので、Webアプリ作成にはReactの他に`Firebase Javascript SDK`や`react-firebase-hooks`を用い、FirebaseHostingにデプロイしていました。
+
+- FW
+  - React, TypeScript
+    - [CSFrequency/react-firebase-hooks: React Hooks for Firebase.](https://github.com/CSFrequency/react-firebase-hooks)
+    - [React Hook Form - Simple React forms validation](https://www.react-hook-form.com/)
+    - [Zod | Documentation](https://zod.dev/)
+    - [react-dropzone](https://react-dropzone.js.org/)
+- Style
+  - TailwindCSS
+- Data & Hosting
+  - [Firebase](https://firebase.google.com)
+    - Hosting, Firestore Database, Storage
+
+今回はRemixを用い、データの送受信をサーバサイドで行うことにしました。また、アカウント登録やファイルアップロード時のフォームバリデーションには、`conform` と `zod` を利用しました。
+
+- FW
+  - React@18
+  - [Remix@2](https://remix.run/)
+- Style
+  - [tailwindcss](https://tailwindcss.com/)
+  - [daisyUI](https://daisyui.com/)
+- Validation:
+  - [Conform](https://conform.guide/)
+  - [Zod](https://zod.dev/)
+- Data: Firebase Admin SDK
+- Hosting: [Cloud Run](https://cloud.google.com/run)
+
+プログラムなどはGitHubレポジトリを参照
+
+https://github.com/oriverk/remix-uploader
+
+Remixを利用したFirebaseStorageへファイルをアップロードするプログラムについては、Zennに投稿しました。
+
+https://zenn.dev/oriverk/articles/2914b8bff52476
+
+## スクリーンショット
+
+スクリーンショット画像中のアカウントはデモ用アカウントですが、各UL済みファイルは実際に存在する私のアカウントがULしたファイルを名前を変えて表示しています。DL数も2024年12月13日時点の実際の数字です。
+
+<details>
+<summary>トップページ：/</summary>
+
+![image](./103314.png)
+
+</details>
+
+<details>
+<summary>ファイル一覧ページ：/\{userId\}</summary>
+
+![image](./124015.png)
+
+</details>
+
+<details>
+<summary>ユーザ登録ページ：/join</summary>
+
+![image](./103225.png)
+
+</details>
+
+<details>
+<summary>ログインページ：/login</summary>
+
+![image](./103212.png)
+
+</details>
+
+<details>
+<summary>ファイル管理ページ：/dashboard</summary>
+
+![image](./104038.png)
+
+</details>
+
+<details>
+<summary>ファイル削除ダイアログ：/dashboard</summary>
+
+![image](./104129.png)
+
+</details>
+
+<details>
+<summary>ファイルアップロードページ：/files/new</summary>
+
+![image](./103340.png)
+
+</details>
+
+<details>
+<summary>ファイル編集ページ：/files/\{fileId\}/edit</summary>
+
+![image](./104046.png)
+
+</details>
+
+## おわりに
+
+ユーザ登録とファイルアップロード可能なユーザを私一人に限定していると言う理由で、いくつかさぼっている所があるので、適宜修正していきたい
+
+- TODO
+  - スタイルの修正
+  - アカウント削除機能の追加
+  - ファイルの物理削除を可能にする
+    - 現在は論理削除のみ
+  - コードの統一化及び整理
+
+また、Remixへの移行作業の途中で、Reactは＠19に、Remixは[ReactRouter@7](https://reactrouter.com/)になってしまいました。Remixに移行したばかりであるが、それらに移行したいと思っています。
+
+![image](./150816.png "配布JSツールのDL数")
+
+頒布しているJS製ツールは1000人ほどが使っている様です。自分が楽するために作ったモノをついでに配布しているだけなので、`Cloud Run`などの費用が赤字にならなさえすれば、まあ十分です。

src/content/blog/20241212-publish-remix-uploader-site/103225.png

@@ -107,7 +107,7 @@ ja-nn
 in MDX v2, bare link and link with `<>` is completely deprecated to avoid `<>` as jsx component.
 
 ```plaintext
-https://ixanary.com
+https://google.com
 ```
 
 ## 画像

src/content/blog/20241212-publish-remix-uploader-site/103314.png

@@ -24,8 +24,8 @@ export function getOgImageSrc(origin: string, pathname: string) {
 export const getStaticPaths = (async () => {
   const blogCollection = await getCollection("blog");
   const results = blogCollection.map((post) => {
-    const { collection, slug, data } = post;
-    const path = `${collection}/${slug}.${extension}`;
+    const { collection, id, data } = post;
+    const path = `${collection}/${id}.${extension}`;
     return {
       params: { path },
       props: {

src/content/blog/20241212-publish-remix-uploader-site/103340.png

@@ -97,6 +97,8 @@
 
   & img {
     max-width: 100%;
+    object-fit: scale-down;
+    max-height: 500px;
   }
 
   & :not(pre) > code::before,