chore: init

.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.eslintignore

@@ -0,0 +1,2 @@
+dist
+build

.eslintrc.js

@@ -0,0 +1,39 @@
+module.exports = {
+  extends: [require.resolve('@3846masa/configs/eslint'), 'plugin:react/recommended', 'plugin:react-hooks/recommended'],
+  rules: {
+    'import/order': [
+      'error',
+      {
+        alphabetize: {
+          order: 'asc',
+        },
+        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
+        'newlines-between': 'always',
+        pathGroups: [
+          {
+            group: 'internal',
+            pattern: '@wsh-2024/**',
+            position: 'after',
+          },
+        ],
+        pathGroupsExcludedImportTypes: ['builtin', 'object'],
+      },
+    ],
+    'no-undefined': 'off',
+    'react/jsx-sort-props': [
+      'error',
+      {
+        reservedFirst: true,
+        shorthandFirst: true,
+      },
+    ],
+    'react/jsx-uses-react': 'off',
+    'react/prop-types': ['off'],
+    'react/react-in-jsx-scope': 'off',
+  },
+  settings: {
+    react: {
+      version: '18.2.0',
+    },
+  },
+};

.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# for resolving better-sqlite3 problems: https://github.com/WiseLibs/better-sqlite3/issues/866#issuecomment-1457993288
+build

.node-version

@@ -0,0 +1 @@
+20.11.1

.npmrc

@@ -0,0 +1,2 @@
+save-prefix=""
+shell-emulator=true

.prettierignore

@@ -0,0 +1,4 @@
+dist
+build
+migrations
+seeds

.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ...require('@3846masa/configs/prettier'),
+};

.tool-versions

@@ -0,0 +1 @@
+nodejs 20.11.1

Dockerfile

@@ -0,0 +1,21 @@
+FROM node:20.11.1-alpine
+
+WORKDIR /usr/src/app
+
+RUN apk --no-cache add tzdata && \
+    cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime && \
+    apk del tzdata
+
+RUN apk --no-cache add jemalloc
+ENV LD_PRELOAD=/usr/lib/libjemalloc.so.2
+
+COPY . .
+RUN corepack enable pnpm
+RUN pnpm install
+RUN pnpm build
+
+ENV PORT 8000
+EXPOSE 8000
+
+ENTRYPOINT ["pnpm"]
+CMD ["start"]

README.md

@@ -0,0 +1,36 @@
+# Web Speed Hackathon 2024 Cyber TOON
+
+## 概要
+
+**"Web Speed Hackathon 2024" は、非常に重たい Web アプリをチューニングして、いかに高速にするかを競う競技です。**
+
+今回のテーマは、架空の漫画サイト「Cyber TOON」です。
+レギュレーションを守った上で、Cyber TOON のパフォーマンスを改善してください。
+
+- 開催日程 | 2024/03/23 10:30 JST - 2024/03/24 17:30 JST
+- 募集要項 | https://cyberagent.connpass.com/event/300386
+- リーダーボード・順位表 | https://web-speed-hackathon-scoring-server-2024.fly.dev/
+
+## 提出方法
+
+評価対象となる環境 (URL) を作成し、次のリンクから参加登録してください。
+
+https://github.com/CyberAgentHack/web-speed-hackathon-2024-scoring-tool/issues/new/choose
+
+## デプロイ
+
+デプロイ方法は [./docs/deployment.md](./docs/deployment.md) を参照してください。
+
+## 採点
+
+採点は GitHub Actions で Lighthouse を動かして行います。
+採点および順位付けについては [./docs/scoring.md](./docs/scoring.md) を参照してください。
+
+## レギュレーション
+
+レギュレーションに違反した場合には、順位対象外となります。
+レギュレーションは [./docs/regulation.md](./docs/regulation.md) を参照してください。
+
+## 開発方法
+
+開発方法は [./docs/development.md](./docs/development.md) を参照してください。

docker-compose.yaml

@@ -0,0 +1,10 @@
+services:
+  app:
+    build:
+      context: .
+    ports:
+      - '${PORT:-8000}:8000'
+    deploy:
+      resources:
+        limits:
+          memory: 512m

docs/deployment.md

@@ -0,0 +1,24 @@
+## Koyeb.com へデプロイする場合（推奨 / 無料）
+
+[Koyeb 公式ドキュメント](https://www.koyeb.com/docs/build-and-deploy/build-from-git) も参照してください。
+
+もし、デプロイで問題が起きた場合、競技時間内であれば運営がサポートします。
+
+1. このレポジトリを自分のレポジトリに fork します
+   - https://github.com/CyberAgentHack/web-speed-hackathon-2024/fork
+2. [Koyeb.com](https://app.koyeb.com/auth/signin) にログインします
+3. 「Create Web Servie」を選択します
+   - ![](./assets/315193605-3af9858e-ac66-428d-84ad-20ff2138a17d.png)
+4. 「GitHub」を選択します
+   - ![](./assets/315193991-555ce520-c691-4857-b7a2-7425a5ee7dd0.png)
+5. Fork したレポジトリを選択します
+   - ![](./assets/315194852-25c04bd7-51c6-499a-acfa-d42226d8ea4e.png)
+6. フォークしたレポジトリの main ブランチが変更されると、自動でデプロイされます
+
+## Koyeb.com 外へデプロイする場合
+
+- 無料の範囲内であれば、Koyeb.com 以外へデプロイしてもかまいません
+  - **外部のサービスは全て無料枠の範囲内で使用してください**
+    - :warning: **万が一コストが発生した場合は、全て自己負担となります**
+  - Koyeb.com 外へのデプロイについて、運営からサポートしません
+  - デプロイ方法がわからない方は Koyeb.com で立ち上げることをオススメします

docs/development.md

@@ -0,0 +1,122 @@
+## 開発方法
+
+### 必要なもの
+
+- Node.js v20.11.1 以上
+
+### セットアップ
+
+1. pnpm （パッケージマネージャ）を有効化します
+   - ```bash
+     corepack enable pnpm
+     corepack use pnpm@latest
+     ```
+2. 依存パッケージをインストールします
+   - ```bash
+     pnpm install
+     ```
+
+### ビルド・起動
+
+1. サーバー、アプリ、管理画面のコードをビルドします
+   - ```bash
+     pnpm run build
+     ```
+2. サーバーを起動します
+   - ```bash
+     pnpm run start
+     ```
+3. Cyber TOON Web アプリには `http://localhost:8000/` でアクセスします
+4. Cyber TOON 管理画面には `http://localhost:8000/admin` でアクセスします
+   - ユーザー名: `[email protected]`
+   - パスワード: `pa5sW0rd!`
+
+## ディレクトリ構成
+
+pnpm workspaces を採用しています。
+
+- `/workspaces/server` : サーバーの実装です
+- `/workspaces/client` : ブラウザが読み込むエントリーファイルです
+- `/workspaces/app` : Cyber TOON Web アプリです
+- `/workspaces/admin` : Cyber TOON 管理画面です
+- `/workspaces/schema` : データベースモデルと API リクエスト・レスポンスのインタフェースです
+- `/workspaces/image-encrypt`: 画像難読化のためのコードです
+- `/workspaces/testing`: E2E テストと VRT の実行環境です
+
+## API ドキュメント
+
+API ドキュメントを Swagger UI で提供しています。
+
+ローカルでサーバーを建てて、 `http://localhost:8000/api/v1` にアクセスします。
+
+## E2E テスト・Visual Regression Testing
+
+Playwright で E2E テスト・Visual Regression Testing (VRT) を提供しています。
+
+**競技後のレギュレーションチェックでは、提供している E2E テスト・VRT と同等のコードで検証します。**
+
+### 使い方
+
+1. Playwright 用の Chromium をインストールします
+   - ```bash
+     pnpm --filter "@wsh-2024/testing" exec playwright install chromium
+     ```
+2. ローカル環境に対してテストを実行する場合は、サーバーをあらかじめ起動しておきます
+   - ```bash
+     pnpm run build && pnpm run start
+     ```
+3. E2E テスト・VRT を実行します
+
+   - :warning: スクリーンショットは環境によって差異が生じるため、ご自身の環境で最初に取り直すことを推奨します
+     - スクリーンショットを取り直す場合は、 `/workspaces/testing/package.json` のコマンドに `--update-snapshots` オプションを追加します
+   - ローカル環境に対してテストを実行する場合
+     - ```bash
+       pnpm run test
+       ```
+   - リモート環境に対してテストを実行する場合
+     - ```bash
+       E2E_BASE_URL=https://web-speed-hackathon-2024.example.com pnpm run test
+       ```
+
+4. デバッグモードでは、ステップバイステップで E2E テスト・VRT を実行できます
+   - ```bash
+     pnpm run test:debug
+     ```
+   - 特定のテストのみを実行したい場合は [test.describe.only](https://playwright.dev/docs/api/class-test#test-describe-only) や [test.only](https://playwright.dev/docs/api/class-test#test-only) で絞り込みを行うと便利です
+   - さらに詳しいデバッグの Tips は Playwright 公式が提供している [Debugging Tests](https://playwright.dev/docs/debug) をご覧ください
+
+## Service Worker について
+
+今回の課題は、Service Worker のコードも提供しています。
+Service Worker で不具合が起きた場合、ページへアクセスできなくなる可能性があります。
+
+ページへアクセスできなくなった場合、次の手順で Service Worker をデバッグ・削除できます。
+
+1. `chrome://serviceworker-internals/` にアクセスします
+2. 対応する URL の Service Worker を探します
+3. Service Worker に対して、停止・削除・インスペクタの表示を行います
+
+## @wsh-2024/image-encrypt について
+
+今回の課題は、漫画ページ画像へ簡易的な難読化処理をかけています。
+このレポジトリで提供される漫画ページ画像は、既に難読化処理がされています。
+
+難読化された画像を復号するための CLI ツールを用意しています。
+
+### 復号する場合
+
+難読化された画像が格納されているディレクトリを `./encrypted`、出力先ディレクトリを `./output` とするとき、次のコマンドで復号化できます。
+
+```bash
+cd workspaces/image-encrypt
+pnpm run cli decrypt ./encrypted ./output
+```
+
+### 難読化する場合
+
+元画像が格納されているディレクトリを `./raw`、出力先ディレクトリを `./output` とするとき、次のコマンドで復号化できます。
+
+```bash
+cd workspaces/image-encrypt;
+pnpm run cli encrypt ./raw ./output
+```

docs/regulation.md

@@ -0,0 +1,33 @@
+## レギュレーション
+
+次に挙げる「明確に禁じていること」と「明確に参加者へ要求すること」を守れなかった場合、順位対象外になる可能性があります。
+
+### 明確に許可されていること
+
+- **課題のレポジトリにあるコード・その他ファイルは、すべて変更してよい**
+  - API が返却する内容に新しい項目を追加してよい
+- **外部のサービス（SaaS など）を無料の範囲で自由に利用してよい**
+  - 無料で使えるサービスは https://free-for.dev/ などで調べられます
+  - 有料のサービスを使った場合の経費などは、自己負担となります
+
+### 明確に禁じていること
+
+- **Google Chrome 最新版において、著しい機能落ちやデザイン差異を発生させてはならない**
+  - とくに提供された E2E テスト・VRT が失敗しないこと
+  - E2E テスト・VRT が失敗した場合、運営によって手動で動作確認を行います
+- **明らかな悪意を持って E2E テスト・VRT を通過させるためのコードを書いてはならない**
+- **漫画ページ画像を取得したときに、内容を明らかに推察できる状態で配信してはならない**
+  - 難読化する手段は、この課題で提供している方法とは別の手段を使ってもよいです
+  - 「画像を少しずらしただけ」「拡張子を変えただけ」である場合は、内容を推察できるため、失格になります
+
+### 明確に参加者へ要求すること
+
+- **順位が確定するまでは、アプリケーションにアクセスできる状態であること**
+  - 任意のタイミングで、レギュレーションチェックをする場合があります
+  - レギュレーションチェックのとき、アプリケーションにアクセスできない場合は、順位対象外になる可能性があります
+- **API `POST /api/v1/initialize` にリクエストを送ると、データベースの内容が初期値にリセットされること**
+  - 採点サーバーは、この課題の提供時点のデータが初期データであることを前提に計測をします
+  - 同等のデータを提供できるのであれば、データベースの内容は自由に書きかえてよいです
+- **Cyber TOON Web アプリにアクセスしたとき、何らかの Service Worker を register すること**
+  - 採点サーバーで Service Worker の起動を待ち合わせているため、register が行われていないと計測できません
+  - Service Worker の中身は自由に書きかえてよいです

docs/scoring.md

@@ -0,0 +1,34 @@
+## 採点方法
+
+1. [Lighthouse](https://github.com/GoogleChrome/lighthouse) を用いて、次の2つを検査します
+   - ページランディング（100点満点）
+   - ユーザーフロー（50点満点）
+2. 検査したそれぞれのスコアを合算し、得点とします
+3. **レギュレーションに違反している場合、順位対象外とします**
+
+### ページランディング
+
+1. [Lighthouse](https://github.com/GoogleChrome/lighthouse) を用いて、次の計4つのページを検査します
+   - ホームページ
+   - 作者詳細ページ
+   - 作品詳細ページ
+   - エピソードページ（漫画ビュアーページ）
+1. 各ページごと [Lighthouse v10 Performance Scoring](https://web.dev/performance-scoring/#lighthouse-10) に基づき、次の総和をページのスコアとします
+   - First Contentful Paint のスコア × 10 (0-10 点)
+   - Speed Index のスコア × 10 (0-10 点)
+   - Largest Contentful Paint のスコア × 25 (0-25 点)
+   - Total Blocking Time のスコア × 30 (0-30 点)
+   - Cumulative Layout Shift のスコア × 25 (0-25 点)
+
+### ユーザーフロー
+
+1. [Lighthouse](https://github.com/GoogleChrome/lighthouse) を用いて、次の計3つのユーザーフローを検査します
+   - 漫画を検索する
+   - 漫画ビュアーでページをめくる
+   - フッターにある「利用規約」を開く
+   - 管理画面にログインする
+   - 管理画面で作品を検索し、作品の情報を編集する
+   - 管理画面で新しいエピソードを作る
+1. 各ユーザーフローごと 、次の総和をユーザーフローのスコアとします
+   - Total Blocking Time のスコア × 25 (0-25 点)
+   - Interaction to Next Paint のスコア × 25 (0-25 点)