commit

23 files changed, 1195 insertions, 0 deletions

diff --git a/src/app/_components/navigationHeader.tsx b/src/app/_components/navigationHeader.tsx
new file mode 100644
index 0000000..945cc26
--- /dev/null
+++ b/src/app/_components/navigationHeader.tsx
@@ -0,0 +1,35 @@
+import Link from "next/link";
+
+export function NavigationHeader() {
+  return (
+    <nav className="bg-white border-gray-200 dark:bg-gray-900">
+      <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+        <Link href={"/"} className="flex items-center space-x-3 rtl:space-x-reverse">
+          <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">アキバ総研アーカイブ</span>
+        </Link>
+        <button data-collapse-toggle="navbar-default" type="button" className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
+          <span className="sr-only">Open main menu</span>
+          <svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
+          </svg>
+        </button>
+        <div className="hidden w-full md:block md:w-auto" id="navbar-default">
+          <ul className="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+            <li>
+              <Link href={"/article/all/page-1"}>記事一覧</Link>
+            </li>
+            <li>
+              <Link href={`/article/category`}>カテゴリ一覧</Link>
+            </li>
+            <li>
+              <Link href={`/article/tag`}>タグ一覧</Link>
+            </li>
+            <li>
+              <Link href={"/anime/all"}>アニメ一覧</Link>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+}
\ No newline at end of file
diff --git a/src/app/anime/[animeId]/page.tsx b/src/app/anime/[animeId]/page.tsx
new file mode 100644
index 0000000..968ce20
--- /dev/null
+++ b/src/app/anime/[animeId]/page.tsx
@@ -0,0 +1,231 @@
+import "./style.css";
+import style from "./style.module.css";
+import dateformat from "dateformat";
+import { animeLoader, AnimeLoaderData } from "../../../util/animeLoader";
+import Link from "next/link";
+dateformat.i18n.dayNames = [
+  '日', '月', '火', '水', '木', '金', '土',
+  '日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'
+];
+type PageType = {
+  searchParams: Record<string, string>,
+  params: { animeId: string, }
+}
+export async function generateMetadata(context: PageType) {
+  const loadedData = await animeLoader.loadData().then(d => {
+    const r = d.find(a => a.animeId == Number(context.params.animeId))!;
+    return r;
+  });
+  return {
+    title: `アキバ総研アーカイブ：アニメ : ${loadedData.title}`,
+  }
+}
+export default async function Page(context: PageType) {
+  const loadedData = await animeLoader.loadData().then(d => {
+    const r = d.find(a => a.animeId == Number(context.params.animeId))!;
+    return r;
+  });;
+  return (
+    <div className="p-8 pb-20 gap-16 sm:p-20">
+      <h1>アニメ詳細</h1>
+      <div>
+        <span>タイトル：</span>
+        <span>{loadedData.title}</span>
+      </div>
+      <div>
+        <span>主カテゴリ：</span>
+        <span>{loadedData.primaryCategory}</span>
+      </div>
+      <div>
+        <span>開始時期：</span>
+        <span>{loadedData.startSeason}</span>
+      </div>
+      <div>
+        <span>アキバ総研のアニメ個別URL：</span>
+        <span className="inline-flex gap-4">
+          <a href={`https://akiba-souken.com/anime/${loadedData.animeId}/`} target="_blank" className={`${style["a"]}`}>公式</a>
+          <a href={`https://web.archive.org/web/*/https://akiba-souken.com/anime/${loadedData.animeId}/`} target="_blank" className={`${style["a"]}`}>IA検索結果</a>
+          <Link href={`/iframe?src=anime-${loadedData.animeId}`} className={`${style["a"]}`}>IAをiframe</Link>
+        </span>
+      </div>
+      {titleReviewScore(loadedData.titleReviewScore)}
+      {titleReviewList(loadedData.animeId, loadedData.titleReviewList)}
+      {titleHitokotoList(loadedData.titleHitokotoList)}
+      {episodeList(loadedData.episodeList)}
+      {episodeHitokotoList(loadedData.episodeHitokotoList)}
+    </div>
+  );
+}
+/** 作品自体のレビューの点数 */
+function titleReviewScore(titleReviewScore: AnimeLoaderData["titleReviewScore"]) {
+  return (
+    <>
+      <h1>作品レビュー</h1>
+      <div>
+        <span>ストーリー：</span>
+        <span>{titleReviewScore.story ?? "なし"}</span>
+      </div>
+      <div>
+        <span>作画：</span>
+        <span>{titleReviewScore.sakuga ?? "なし"}</span>
+      </div>
+      <div>
+        <span>キャラクター：</span>
+        <span>{titleReviewScore.character ?? "なし"}</span>
+      </div>
+      <div>
+        <span>音楽：</span>
+        <span>{titleReviewScore.music ?? "なし"}</span>
+      </div>
+      <div>
+        <span>オリジナリティ：</span>
+        <span>{titleReviewScore.originality ?? "なし"}</span>
+      </div>
+      <div>
+        <span>演出：</span>
+        <span>{titleReviewScore.storyboard ?? "なし"}</span>
+      </div>
+      <div>
+        <span>声優：</span>
+        <span>{titleReviewScore.voice ?? "なし"}</span>
+      </div>
+      <div>
+        <span>歌：</span>
+        <span>{titleReviewScore.song ?? "なし"}</span>
+      </div>
+      <div>
+        <span>満足度：</span>
+        <span>{titleReviewScore.manzokudo ?? "なし"}</span>
+      </div>
+    </>
+  );
+}
+function titleReviewList(animeId: number, list: AnimeLoaderData["titleReviewList"]) {
+  // レビューの一覧
+  const PPV = 20;
+  const reviewListLinks: JSX.Element[] = [];
+  for (let i = 0; i < Math.ceil(list.length / PPV); i++) {
+    const itemFrom = (i * PPV) + 1;
+    const itemTo = Math.min(itemFrom + PPV - 1, list.length);
+    if (i == 0) {
+      // 1ページ目
+      reviewListLinks.push(<h2 key={`review-header`}>レビュー自体の一覧</h2>)
+      reviewListLinks.push(
+        <div key={`review-list-${i}`}>
+          <span>新着 {itemFrom}～{itemTo}件目</span>
+          <span className="inline-flex gap-4">
+            <a href={`https://akiba-souken.com/anime/${animeId}/review/`} target="_blank" className={`${style["a"]}`}>公式</a>
+            <a href={`https://web.archive.org/web/*/https://akiba-souken.com/anime/${animeId}/review/`} target="_blank" className={`${style["a"]}`}>IA検索結果</a>
+            <Link href={`/iframe?src=anime-${animeId}-review`} className={`${style["a"]}`}>IAをiframe</Link>
+          </span>
+        </div>
+      );
+    } else {
+      // 2ページ目移行
+      const page = i + 1;
+      reviewListLinks.push(
+        <div key={`review-list-${i}`}>
+          <span>新着 {itemFrom}～{itemTo}件目</span>
+          <span className="inline-flex gap-4">
+            <a href={`https://akiba-souken.com/anime/${animeId}/review/?page=${page}`} target="_blank" className={`${style["a"]}`}>公式</a>
+            <a href={`https://web.archive.org/web/*/https://akiba-souken.com/anime/${animeId}/review/?page=${page}`} target="_blank" className={`${style["a"]}`}>IA検索結果</a>
+            <Link href={`/iframe?src=anime-${animeId}-review-p${page}`} className={`${style["a"]}`}>IAをiframe</Link>
+          </span>
+        </div>
+      );
+    }
+  }
+  const reviewList: JSX.Element[] = [];
+  if (0 < list.length) {
+    reviewList.push(<h2 key="head">個別のレビュー一覧</h2>)
+    reviewList.push(<span key="notice">レビューの一覧だとネタバレのレビューが表示されないので、個別のレビューのリンクを作成します</span>)
+    for (const v of list) {
+      const timestampStr = dateformat(new Date(v.timestampSec * 1000), "yyyy/mm/dd(ddd)HH:MM:ss");
+      const index = list.indexOf(v);
+      reviewList.push(
+        <div key={`review-list-${v.reviewId}`}>
+          <span className="inline-flex gap-4">
+            <span>{index + 1}/{list.length}</span>
+            <a href={`https://akiba-souken.com/anime/${animeId}/review/${v.reviewId}/`} target="_blank" className={`${style["a"]}`}>公式</a>
+            <a href={`https://web.archive.org/web/*/https://akiba-souken.com/anime/${animeId}/review/${v.reviewId}/`} target="_blank" className={`${style["a"]}`}>IA検索結果</a>
+            <Link href={`/iframe?src=anime-${animeId}-review-${v.reviewId}`} className={`${style["a"]}`}>IAをiframe</Link>
+            <span>投稿日時:{timestampStr}</span>
+            <span>スコア:{v.score}</span>
+            <span>ネタバレ:{v.isSpoiler ? "はい" : "いいえ"}</span>
+            <span>投稿者:{v.userName}</span>
+          </span>
+        </div>
+      );
+    }
+  }
+  return (<>
+    <h1>作品のレビュー一覧( {list.length} 件 )</h1>
+    {reviewListLinks}
+    {reviewList}
+  </>);
+}
+function titleHitokotoList(list: AnimeLoaderData["titleHitokotoList"]) {
+  const hitokotoList: JSX.Element[] = [];
+  if (0 < list.length) {
+    hitokotoList.push(<div key={`notice`}>ヒトコトは個別のURLが無いので必要最低限のみテキストを転載します</div>)
+    for (const h of list) {
+      const timestampStr = dateformat(new Date(h.timestampSec * 1000), "yyyy/mm/dd(ddd)HH:MM:ss")
+      const index = list.indexOf(h);
+      hitokotoList.push(
+        <div key={`h-${h.hitokotoId}`}>
+          {index + 1}/{list.length} {timestampStr} {h.reviewHtml}
+        </div>
+      )
+    }
+  }
+  return (<>
+    <h1>作品のヒトコト一覧( {list.length} 件 )</h1>
+    {hitokotoList}
+  </>);
+}
+function episodeList(list: AnimeLoaderData["episodeList"]) {
+  const episodeElementList: JSX.Element[] = [];
+  if (0 < list.length) {
+    for (const e of list) {
+      const index = list.indexOf(e);
+      episodeElementList.push(
+        <div key={`e-${e.episodeId}`}>
+          {index + 1}/{list.length} 「{e.subTitle}」 ヒトコト数：{e.reviewCount} スコア：{e.score ?? "なし"}
+        </div>
+      )
+    }
+  }
+  return (<>
+    <h1>作品のエピソード ( {list.length} 件 )</h1>
+    {episodeElementList}
+  </>);
+}
+function episodeHitokotoList(list: AnimeLoaderData["episodeHitokotoList"]) {
+  const hitokotoList: JSX.Element[] = [];
+  const totalHitokotoCount = list.map(h => h.hitokotoList.length).reduce((a, b) => a + b, 0)
+  if (0 < list.length) {
+    hitokotoList.push(<div key={`notice`}>ヒトコトは個別のURLが無いので必要最低限のみテキストを転載します</div>)
+    let index = 0;
+    for (const e of list) {
+      index += 1;
+      for (const h of e.hitokotoList) {
+        const timestampStr = dateformat(new Date(h.timestampSec * 1000), "yyyy/mm/dd(ddd)HH:MM:ss")
+        hitokotoList.push(
+          <div key={`h-${e.episodeId}-${h.hitokotoId}`}>
+            {index}/{totalHitokotoCount} 第{e.episodeId}話のヒトコト. {timestampStr} {h.reviewHtml}
+          </div>
+        )
+      }
+    }
+  }
+  return (<>
+    <h1>作品のエピソードごとのヒトコト ( {totalHitokotoCount} 件 )</h1>
+    {hitokotoList}
+  </>);
+}
+export async function generateStaticParams() {
+  const loadedData = await animeLoader.loadData();
+  return loadedData.map(c => {
+    return { animeId: String(c.animeId) };
+  }) satisfies PageType["params"][];
+}
\ No newline at end of file
diff --git a/src/app/anime/[animeId]/style.css b/src/app/anime/[animeId]/style.css
new file mode 100644
index 0000000..b7d67c0
--- /dev/null
+++ b/src/app/anime/[animeId]/style.css
@@ -0,0 +1,3 @@
+h1,h2 {
+  all: revert;
+}
diff --git a/src/app/anime/[animeId]/style.module.css b/src/app/anime/[animeId]/style.module.css
new file mode 100644
index 0000000..fd9a86f
--- /dev/null
+++ b/src/app/anime/[animeId]/style.module.css
@@ -0,0 +1,3 @@
+.a {
+  all: revert;
+}
\ No newline at end of file
diff --git a/src/app/anime/all/page.tsx b/src/app/anime/all/page.tsx
new file mode 100644
index 0000000..9c4f4e6
--- /dev/null
+++ b/src/app/anime/all/page.tsx
@@ -0,0 +1,64 @@
+import { animeLoader } from "../../../util/animeLoader";
+import style from "./style.module.css";
+import Link from "next/link";
+type PageType = {
+  searchParams: Record<string, string>,
+  params: {}
+}
+export async function generateMetadata(context: PageType) {
+  return {
+    title: `アキバ総研アーカイブ：アニメ一覧`,
+  }
+}
+export default async function Page(context: PageType) {
+  const loadedData = await animeLoader.loadData();
+  return (
+    <div className="p-1 gap-16">
+      <div className="text-right">全:{loadedData.length}件</div>
+      <table className="w-full">
+        <thead className="bg-white border-b sticky top-0 text-md font-medium text-gray-900">
+          <tr>
+            <th scope="col" className="px-6 py-4 text-left">
+              No
+            </th>
+            <th scope="col" className="px-6 py-4 text-left">
+              カテゴリ
+            </th>
+            <th scope="col" className="px-6 py-4 text-left">
+              開始時期
+            </th>
+            <th scope="col" className="px-6 py-4 text-left">
+              満足度
+            </th>
+            <th scope="col" className="px-6 py-4 text-left">
+              タイトル
+            </th>
+            <th scope="col" className="px-6 py-4 text-left">
+              レビュー件数
+            </th>
+            <th scope="col" className="px-6 py-4 text-left">
+              ヒトコト件数
+            </th>
+          </tr>
+        </thead>
+        <tbody className="">
+          {loadedData.map(d => {
+            return (
+              <tr className={`bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100 text-sm text-gray-900 font-light`}>
+                <td className={`px-6 py-1 whitespace-nowrap ${style["akiba-souken-archive-anchor"]}`}>
+                  <Link href={`/anime/${d.animeId}`}>{d.animeId}</Link>
+                </td>
+                <td className="px-6 py-1 whitespace-nowrap">{d.primaryCategory}</td>
+                <td className="px-6 py-1 whitespace-nowrap">{d.startSeason}</td>
+                <td className={`px-6 py-1 whitespace-nowrap ${d.titleReviewScore.manzokudo == null ? "text-gray-300" : ""}`}>{d.titleReviewScore.manzokudo ?? "なし"}</td>
+                <td className="px-6 py-1 whitespace-nowrap">{d.title}</td>
+                <td className={`px-6 py-1 whitespace-nowrap ${d.titleReviewList.length == 0 ? "text-gray-300" : ""}`}>{d.titleReviewList.length}</td>
+                <td className={`px-6 py-1 whitespace-nowrap ${d.titleHitokotoList.length == 0 ? "text-gray-300" : ""}`}>{d.titleHitokotoList.length}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/src/app/anime/all/style.module.css b/src/app/anime/all/style.module.css
new file mode 100644
index 0000000..20abae7
--- /dev/null
+++ b/src/app/anime/all/style.module.css
@@ -0,0 +1,3 @@
+.akiba-souken-archive-anchor {
+  @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600
+}
diff --git a/src/app/article/_components/articleListElement.tsx b/src/app/article/_components/articleListElement.tsx
new file mode 100644
index 0000000..21ee947
--- /dev/null
+++ b/src/app/article/_components/articleListElement.tsx
@@ -0,0 +1,123 @@
+import Link from "next/link";
+import dateformat from "dateformat";
+import { ArticleLoader } from "../../../util/articleLoader";
+dateformat.i18n.dayNames = [
+  '日', '月', '火', '水', '木', '金', '土',
+  '日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'
+];
+type DisplayData = Awaited<ReturnType<ArticleLoader["loadData"]>>[number];
+export function ArticleListElement(displayData: DisplayData[]) {
+  return (
+    <table className="w-full">
+      <thead className="bg-white border-b sticky top-0 text-md font-medium text-gray-900">
+        <tr>
+          <th scope="col" className="px-6 py-4 text-left">
+            No
+          </th>
+          <th scope="col" className="px-6 py-4 text-left">
+            カテゴリ
+          </th>
+          <th scope="col" className="px-6 py-4 text-left">
+            タイトル
+          </th>
+          <th scope="col" className="px-6 py-4 text-left">
+            日時
+          </th>
+        </tr>
+      </thead>
+      <tbody className="">
+        {displayData.map(d => {
+          const officialLinkTitle = `公式のakiba-souken.com へのリンク。閉鎖後は繋がらなくなるはず`;
+          const iaSearchResultLinkTitle = `InternetArchive の検索結果へのリンク`;
+          const iframeLinkTitle = `Iframeを使ってInternetArchiveに記録されたアーカイブを表示します`;
+          const topCategory = d.breadLinks[0];
+          const timestampStr = dateformat(new Date(d.timestampMs), "yyyy/mm/dd(ddd)HH:MM");
+          const originalUrl = `https://akiba-souken.com/article/${d.articleId}/`;
+          const page2After = (() => {
+            if (d.maxPageNumber == 1) {
+              return [(<></>)];
+            }
+            const result: JSX.Element[] = [
+              (<hr key={`hr`} />)
+            ];
+            for (let page = 2; page <= d.maxPageNumber; page++) {
+              result.push(
+                <div className="flex gap-4 text-xs text-gray-300" key={`page-${page}`}>
+                  <a href={`https://akiba-souken.com/article/${d.articleId}/?page=${page}`} target="_blank" className="transition duration-300 ease-in-out hover:text-gray-900" title={officialLinkTitle}>公式</a>
+                  <a href={`https://web.archive.org/web/*/https://akiba-souken.com/article/${d.articleId}/?page=${page}`} target="_blank" className="transition duration-300 ease-in-out hover:text-gray-900" title={iaSearchResultLinkTitle}>IA検索結果</a>
+                  <Link href={`/iframe?src=article-${d.articleId}-${page}`} className="transition duration-300 ease-in-out hover:text-gray-900" title={iframeLinkTitle}>IAをiframe</Link> Page:{page}
+                </div>
+              );
+            }
+            return result;
+          })();
+          // パンくずリスト部分を作成
+          let breadElement = (<span key={`notice`}></span>);
+          if (0 < d.breadLinks.length) {
+            const breadChildElement: JSX.Element[] = [];
+            breadChildElement.push(<span className="mr-[-0.5rem]" key={`label`}>パンくずリスト：</span>);
+            for (const bread of d.breadLinks) {
+              if (d.breadLinks.indexOf(bread) != 0) {
+                breadChildElement.push(<span>＞</span>);
+              }
+              // 1つ目のパンくずリストはカテゴリだけど、2つ目以降のパンくずリストはタグと同じ
+              if (d.breadLinks.indexOf(bread) == 0) {
+                breadChildElement.push(<Link href={`/article/category/${bread}`} className="transition duration-300 ease-in-out hover:text-gray-900" key={`bread-${bread}`}>{bread}</Link>);
+              } else {
+                breadChildElement.push(<Link href={`/article/tag/${bread}`} className="transition duration-300 ease-in-out hover:text-gray-900" key={`bread-${bread}`}>{bread}</Link>);
+              }
+            }
+            breadElement = (
+              <span className="flex gap-0.5">
+                {breadChildElement}
+              </span>
+            );
+          }
+          // タグ部分を作成
+          let tagElement = (<span key={`notice`}>タグ無し</span>);
+          if (d.tags.length != 0) {
+            const tagChildElements: JSX.Element[] = [];
+            tagChildElements.push(<span className="mr-[-0.5rem]" key={`label`}>タグ：</span>);
+            for (const tag of d.tags) {
+              if (d.tags.indexOf(tag) != 0) {
+                tagChildElements.push(<span>／</span>);
+              }
+              tagChildElements.push(<Link href={`/article/tag/${tag}`} className="transition duration-300 ease-in-out hover:text-gray-900" key={`tag-${tag}`}>{tag}</Link>);
+            }
+            tagElement = (
+              <span className="flex gap-0.5">
+                {tagChildElements}
+              </span>
+            );
+          }
+          const hatebuElement = (
+            <a href={`https://b.hatena.ne.jp/entry/${originalUrl}`}>
+              <img src={`https://b.hatena.ne.jp/entry/image/${originalUrl}`} />
+            </a>
+          );
+          return (
+            <tr className="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100 text-sm text-gray-900 font-light">
+              <td className="px-1 py-1">{d.articleId}</td>
+              <td className="px-1 py-1">
+                <Link href={`/article/category/${topCategory}`} className="transition duration-300 ease-in-out hover:text-gray-900 original-href" >{topCategory}</Link>
+              </td>
+              <td className="px-1 py-1">
+                <div>{d.title}</div>
+                <div className="flex gap-4 text-xs text-gray-300">
+                  <a href={originalUrl} target="_blank" className="transition duration-300 ease-in-out hover:text-gray-900" title={officialLinkTitle}>公式</a>
+                  <a href={`https://web.archive.org/web/*/${originalUrl}`} target="_blank" className="transition duration-300 ease-in-out hover:text-gray-900" title={iaSearchResultLinkTitle}>IA検索結果</a>
+                  <Link href={`/iframe?src=article-${d.articleId}`} className="transition duration-300 ease-in-out hover:text-gray-900" title={iframeLinkTitle}>IAをiframe</Link>
+                  {breadElement}
+                  {tagElement}
+                  {hatebuElement}
+                </div>
+                {page2After}
+              </td>
+              <td className="px-1 py-1">{timestampStr}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
\ No newline at end of file
diff --git a/src/app/article/all/[pageId]/page.tsx b/src/app/article/all/[pageId]/page.tsx
new file mode 100644
index 0000000..fd72772
--- /dev/null
+++ b/src/app/article/all/[pageId]/page.tsx
@@ -0,0 +1,165 @@
+import Link from "next/link";
+import { ArticleLoader } from "../../../../util/articleLoader";
+import dateformat from "dateformat";
+import { createPagenation } from "../../../../util/pagenation";
+import { ArticleListElement } from "../../_components/articleListElement";
+dateformat.i18n.dayNames = [
+  '日', '月', '火', '水', '木', '金', '土',
+  '日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'
+];
+type PageType = {
+  searchParams: Record<string, string>,
+  params: {
+    pageId: string,
+  }
+}
+export async function generateMetadata(context: PageType) {
+  const pageId = getPageIdNumber(context.params.pageId);
+  return {
+    title: `アキバ総研アーカイブ：ページ ${pageId}`,
+  }
+}
+export default async function Page(context: PageType) {
+  const pageId = getPageIdNumber(context.params.pageId);
+  const al = new ArticleLoader()
+  const loadedData = await al.loadData();
+  const chunkdData = chunk(loadedData, PPV);
+  const displayData = chunkdData[pageId - 1];
+  return (
+    <div className="p-1 gap-16">
+      {pagenationElement(pageId, chunkdData.length)}
+      <div className="text-right">全:{loadedData.length}件</div>
+      {ArticleListElement(displayData)}
+      {pagenationElement(pageId, chunkdData.length)}
+    </div>
+  );
+}
+function pagenationElement(now: number, max: number) {
+  const pagenationData = createPagenation({ now: now, max: max, between: 2 });
+  const liElements: JSX.Element[] = [];
+  for (const v of pagenationData) {
+    if (v.type == "back") {
+      if (v.link == null) {
+        liElements.push(
+          <li key={v.key}>
+            <span className="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+              <span className="sr-only">Previous</span>
+              <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
+              </svg>
+            </span>
+          </li>
+        );
+      } else {
+        liElements.push(
+          <li key={v.key}>
+            <Link href={`/article/all/page-${v.link}`} className="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+              <span className="sr-only">Previous</span>
+              <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
+              </svg>
+            </Link>
+          </li>
+        );
+      }
+    } else if (v.type == "next") {
+      if (v.link == null) {
+        liElements.push(
+          <li key={v.key}>
+            <span className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+              <span className="sr-only">Next</span>
+              <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
+              </svg>
+            </span>
+          </li>
+        );
+      } else {
+        liElements.push(
+          <li key={v.key}>
+            <Link href={`/article/all/page-${v.link}`} className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+              <span className="sr-only">Next</span>
+              <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
+              </svg>
+            </Link>
+          </li>
+        );
+      }
+    } else if (v.type == "num") {
+      if (v.link == null) {
+        if (v.num == now) {
+          liElements.push(
+            <li key={v.key}>
+              <span
+                className="z-10 flex items-center justify-center px-4 h-10 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"
+              >{v.num}</span>
+            </li>
+          );
+        } else {
+          liElements.push(
+            <li key={v.key}>
+              <span
+                className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+              >{v.num}</span>
+            </li>
+          );
+        }
+      } else {
+        liElements.push(
+          <li key={v.key}>
+            <Link
+              href={`/article/all/page-${v.link}`}
+              className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+            >{v.num}</Link>
+          </li>
+        );
+      }
+    } else if (v.type == "sp") {
+      <li key={v.key}>
+        <span
+          className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+        >...</span>
+      </li>
+    }
+  }
+  return (
+    <nav className="flex justify-center pt-10">
+      <ul className="flex items-center -space-x-px h-10 text-base">
+        {liElements}
+      </ul>
+    </nav>
+  );
+}
+function getPageIdNumber(pageIdStr: string) {
+  const m = pageIdStr.match(/page-(\d+)/)!;
+  const id = Number(m[1]);
+  return id;
+}
+const PPV = Number(process.env["AKIBA_SOUKEN_AR_ITEM_PPV"] ?? "100");
+if (!Number.isInteger(PPV)) {
+  throw new Error(`AKIBA_SOUKEN_AR_ITEM_PPVに整数をセットして下さい`);
+}
+//export const dynamicParams = true;
+export async function generateStaticParams() {
+  const al = new ArticleLoader()
+  const loadedData = await al.loadData();
+  const chunkdData = chunk(loadedData, PPV);
+  return chunkdData.map((data, index) => {
+    return { pageId: `page-${index + 1}`, data: data };
+  });
+}
+// export const generateStaticParams = async () => {
+//   return [{ articleid: "123" }];
+// };
+
+function chunk<T = any>(list: T[], len: number) {
+  if (len <= 0) {
+    throw new Error();
+  }
+  const result: T[][] = [];
+  for (let i = 0; i < list.length; i += len) {
+    result.push(list.slice(i, i + len));
+  }
+  return result;
+}
\ No newline at end of file
diff --git a/src/app/article/category/[categoryName]/page.tsx b/src/app/article/category/[categoryName]/page.tsx
new file mode 100644
index 0000000..3e60a89
--- /dev/null
+++ b/src/app/article/category/[categoryName]/page.tsx
@@ -0,0 +1,44 @@
+import { ArticleLoader } from "../../../../util/articleLoader";
+import { ArticleListElement } from "../../_components/articleListElement";
+type PageType = {
+  searchParams: Record<string, string>,
+  params: {
+    categoryName: string,
+  }
+}
+export async function generateMetadata(context: PageType) {
+  return {
+    title: `アキバ総研アーカイブ：カテゴリ ${decodeURIComponent(context.params.categoryName)}`,
+  }
+}
+export default async function Page(context: PageType) {
+  const al = new ArticleLoader()
+  const nowPageCategoryName = decodeURIComponent(context.params.categoryName);
+  const loadedData = await al.loadData().then(articles => {
+    const filterd = articles.filter(article => {
+      if (article.breadLinks.length == 0) {
+        return false;
+      }
+      const category = article.breadLinks[0];
+      if (category == nowPageCategoryName) {
+        return true;
+      } else {
+        return false;
+      }
+    });
+    return filterd;
+  });
+  return (
+    <div className="p-1 gap-16">
+      <div className="text-center">カテゴリ:{nowPageCategoryName} の記事一覧</div>
+      <div className="text-right">全:{loadedData.length}件</div>
+      {ArticleListElement(loadedData)}
+    </div>
+  );
+}
+export async function generateStaticParams() {
+  const categoryList = await new ArticleLoader().getCategoryList();
+  return categoryList.map((data, index) => {
+    return { categoryName: data.name };
+  });
+}
diff --git a/src/app/article/category/page.tsx b/src/app/article/category/page.tsx
new file mode 100644
index 0000000..4976054
--- /dev/null
+++ b/src/app/article/category/page.tsx
@@ -0,0 +1,29 @@
+import Link from "next/link";
+import { ArticleLoader } from "../../../util/articleLoader";
+import "./style.css";
+type PageType = {
+  searchParams: Record<string, string>,
+  params: {
+    tagName: string,
+  }
+}
+export async function generateMetadata(context: PageType) {
+  return {
+    title: `アキバ総研アーカイブ：カテゴリ一覧`,
+  }
+}
+export default async function Page(context: PageType) {
+  const tagList = await new ArticleLoader().getCategoryList();
+  const categoryListElement: JSX.Element[] = [];
+  tagList.forEach(t => {
+    categoryListElement.push(<span key={t.name}><Link href={`/article/category/${t.name}`}>{t.name}({t.count})</Link></span>)
+  })
+  return (
+    <div className="p-8 pb-20 gap-16 sm:p-20">
+      <h1>記事にセットされているカテゴリの一覧</h1>
+      <div className="flex gap-2">
+        {categoryListElement}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/article/category/style.css b/src/app/article/category/style.css
new file mode 100644
index 0000000..f8a5c5f
--- /dev/null
+++ b/src/app/article/category/style.css
@@ -0,0 +1,3 @@
+h1,h2,h3 {
+  all: revert;
+}
diff --git a/src/app/article/tag/[tagName]/page.tsx b/src/app/article/tag/[tagName]/page.tsx
new file mode 100644
index 0000000..3df1f1e
--- /dev/null
+++ b/src/app/article/tag/[tagName]/page.tsx
@@ -0,0 +1,40 @@
+import { ArticleLoader } from "../../../../util/articleLoader";
+import { ArticleListElement } from "../../_components/articleListElement";
+type PageType = {
+  searchParams: Record<string, string>,
+  params: {
+    tagName: string,
+  }
+}
+export async function generateMetadata(context: PageType) {
+  return {
+    title: `アキバ総研アーカイブ：ページ ${context.params.tagName}`,
+  }
+}
+export default async function Page(context: PageType) {
+  const al = new ArticleLoader()
+  const nowPageTagName = decodeURIComponent(context.params.tagName);
+  const loadedData = await al.loadData().then(articles => {
+    const filterd = articles.filter(article => {
+      if (article.tags.includes(nowPageTagName)) {
+        return true;
+      } else {
+        return false;
+      }
+    });
+    return filterd;
+  });
+  return (
+    <div className="p-1 gap-16">
+      <div className="text-center">タグ:{nowPageTagName} の記事一覧</div>
+      <div className="text-right">全:{loadedData.length}件</div>
+      {ArticleListElement(loadedData)}
+    </div>
+  );
+}
+export async function generateStaticParams() {
+  const tagList = await new ArticleLoader().getTagList();
+  return tagList.map((data, index) => {
+    return { tagName: data.name };
+  });
+}
diff --git a/src/app/article/tag/page.tsx b/src/app/article/tag/page.tsx
new file mode 100644
index 0000000..211ca94
--- /dev/null
+++ b/src/app/article/tag/page.tsx
@@ -0,0 +1,30 @@
+import Link from "next/link";
+import { ArticleLoader } from "../../../util/articleLoader";
+import "./style.css";
+type PageType = {
+  searchParams: Record<string, string>,
+  params: {
+    tagName: string,
+  }
+}
+export async function generateMetadata(context: PageType) {
+  return {
+    title: `アキバ総研アーカイブ：タグ一覧`,
+  }
+}
+export default async function Page(context: PageType) {
+  const tagList = await new ArticleLoader().getTagList();
+  const tagsElement: JSX.Element[] = [];
+  tagList.forEach(t => {
+    tagsElement.push(<span key={t.name}><Link href={`/article/tag/${t.name}`}>{t.name}({t.count})</Link></span>)
+  })
+  return (
+    <div className="p-8 pb-20 gap-16 sm:p-20">
+      <h1>著名なタグ一覧</h1>
+      <h1>記事にセットされているタグの一覧</h1>
+      <div className="flex gap-2 flex-wrap">
+        {tagsElement}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/article/tag/style.css b/src/app/article/tag/style.css
new file mode 100644
index 0000000..f8a5c5f
--- /dev/null
+++ b/src/app/article/tag/style.css
@@ -0,0 +1,3 @@
+h1,h2,h3 {
+  all: revert;
+}
diff --git a/src/app/globals.css b/src/app/globals.css
new file mode 100644
index 0000000..3b8b598
--- /dev/null
+++ b/src/app/globals.css
@@ -0,0 +1,31 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+.original-href {
+  all: revert;
+}
\ No newline at end of file
diff --git a/src/app/iframe/page.tsx b/src/app/iframe/page.tsx
new file mode 100644
index 0000000..e26e921
--- /dev/null
+++ b/src/app/iframe/page.tsx
@@ -0,0 +1,52 @@
+'use client'
+import Link from "next/link";
+import { useEffect, useState } from "react";
+type PageType = {
+  searchParams: Record<string, string>,
+  params: {
+    articleId: string,
+  }
+}
+export default function Page(context: PageType) {
+  const [iframeUrl, setIframeUrl] = useState("abount:blank");
+  const [iaSearchPageUrl, setIaSearchPageUrl] = useState("abount:blank");
+  useEffect(() => {
+    const paramString = new URL(document.location.href).searchParams.get("src") ?? "";
+    const showOriginalUrl = parseParam(paramString);
+    if (showOriginalUrl != null) {
+      const iaUrlKey = `20241001000000`;// 同じURLで記事が更新されている場合もあるので、最終版であろう2024/10/01 00:00:00を指定
+      const iframeUrl = `https://web.archive.org/web/${iaUrlKey}if_/${showOriginalUrl}`;
+      setIframeUrl(iframeUrl);
+      const iaSeachPageUrlStr = `https://web.archive.org/web/*/${showOriginalUrl}`;
+      setIaSearchPageUrl(iaSeachPageUrlStr);
+    }
+  }, []);
+  return (
+    <div className="flex-1 flex flex-col">
+      <div className="text-center">InternetArchiveの検索結果のURL: <Link href={iaSearchPageUrl} className="original-href">{iaSearchPageUrl}</Link></div>
+      <div className="text-center">iframeのURL: <Link href={iframeUrl} className="original-href" title="日付の部分は固定値だが、適切な日付に自動的にリダイレクトされるので問題なし">{iframeUrl}</Link></div>
+      <div className="text-center text-xs">※アキバ総研のページをIneternetArchiveで見る時はJavascriptを無効化しないと、強制的にリダイレクトされてしまいます</div>
+      <div className="w-full flex-1 flex flex-col">
+        <div className="text-center text-3xl text-red-600">以下のページはInternetArchiveに保存されている内容です。</div>
+        <iframe src={iframeUrl} sandbox="" className="flex-1 border-solid border-black border p-4 bg-gray-700"></iframe>
+      </div>
+    </div>
+  );
+}
+function parseParam(paramString: string) {
+  let m: RegExpMatchArray | null = null;
+  if (m = paramString.match(/^article-(\d+)$/)) {
+    return `https://akiba-souken.com/article/${m[1]}/`
+  } else if (m = paramString.match(/^article-(\d+)-(\d+)$/)) {
+    return `https://akiba-souken.com/article/${m[1]}/?page=${m[2]}`
+  } else if (m = paramString.match(/^anime-(\d+)$/)) {
+    return `https://akiba-souken.com/anime/${m[1]}/`;
+  } else if (m = paramString.match(/^anime-(\d+)-review$/)) {
+    return `https://akiba-souken.com/anime/${m[1]}/review/`;
+  } else if (m = paramString.match(/^anime-(\d+)-review-p(\d+)$/)) {
+    return `https://akiba-souken.com/anime/${m[1]}/review/?page=${m[2]}`;
+  } else if (m = paramString.match(/^anime-(\d+)-review-(\d+)$/)) {
+    return `https://akiba-souken.com/anime/${m[1]}/review/${m[2]}/`;
+  }
+  return null;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..9d5b2b9
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,28 @@
+import type { Metadata } from "next";

+import "./globals.css";

+import { NavigationHeader } from "./_components/navigationHeader";

+

+export const metadata: Metadata = {

+  title: "アキバ総研アーカイブ",

+  //description: "Generated by create next app",

+};

+

+export default function RootLayout({

+  children,

+}: Readonly<{

+  children: React.ReactNode;

+}>) {

+  return (

+    <html lang="en">

+      <body

+        className={`antialiased min-h-screen flex flex-col`}

+      >

+        <NavigationHeader></NavigationHeader>

+        {children}

+        <div>

+          全てのデータは<a href="https://akiba-souken.com/" target="_blank">アキバ総研</a>より。

+        </div>

+      </body>

+    </html>

+  );

+}

diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..58a7429
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,30 @@
+import "./style.css"
+import style from "./style.module.css"
+export default function Home() {
+  return (
+    <div className="min-h-screen p-8 pb-20">
+      アキバ総研( <a href="https://akiba-souken.com/" target="_blank" className={`${style["a"]}`}>https://akiba-souken.com/</a> ) の記事一覧をアーカイブしたページです。このサイト内にアキバ総研の記事本文はありません。<br />
+      アキバ総研は2024/08/01にサービス終了のアナウンスが行われ、2024/08/31に記事の更新が停止しました。<br />
+      このアーカイブは2024/08/31～2024/09/30 の間に取得していますが、特定の瞬間のスナップショットではないので、データの不整合がある可能性があります。<br />
+      アキバ総研は記事ページ内にドメインがakiba-souken.com でない場合にトップページにリダイレクトされるjavascriptが仕込まれていますので、InternetArchiveから閲覧する時はdevtool等でjsをオフにする必要があります。<br />
+      このページはGithubActions＆GithubPagesでデプロイされています。生データが欲しい方はレポジトリ https://github.com/fushihara/akiba-souken-archive をチェックアウトする事をおすすめします。
+      <h3>アキバ総研とは？</h3>
+      アキバ総研はカカクコムが2002/08から2024/09まで公開していたアキバ系ニュースサイトです。<br />
+      初期のURLは http://kakaku.com/akiba/ 形式で、価格.comのサブディレクトリにありました。<br />
+      2007年頃から http://akiba.kakaku.com/ に移動し、2011年頃から https://akiba-souken.com/ ドメインに移動しました。<br />
+      過去の記事の継続性についてですが、少なくともkakaku.comドメイン配下のURLは2024/09時点で全てakiba-souken.comのトップページにリダイレクトされてアクセス出来ませんでした。<br />
+      akiba-souken.com内の最古の記事のタイムスタンプは2006/12/14なので、akiba.kakaku.comから akiba-souken.com への移行は行われたのかもしれませんが、最初期の記事はInternetArchiveにしか無い模様です<br />
+      その他にもPCパーツのレビュー機能が2014/09/30のリニューアルで削除されていたりします。記事がメインコンテンツではありますが、それ以外のサブコンテンツは既に永久に失われているものがあります。<br />
+      https://mevius.5ch.net/test/read.cgi/esite/1690495133/595 も参照。
+      <h3>このアーカイブサイトについて</h3>
+      ソースコード、データは以下のレポジトリに一式があります。nodeのnext.jsのSSGでGithubPagesサイトを構築しています。<br />
+      https://github.com/fushihara/akiba-souken-archive<br />
+      このサイトの記事一覧などが欲しい場合は、スクレイピングをするより上記レポジトリからファイルを落としたほうが早いです。<br />
+      スクレイピングに使ったツール一式は以下の通りです。こちらのスクリプトはdenoを使っています。DLしたhtmlをsqliteに保存して、同じ内容で複数アクセスが起きないように工夫しています。<br />
+      xxxxx
+      <p />
+      このアーカイブサイトは閉鎖決定時点の全てのコンテンツを網羅している訳ではありません。<br />
+      通常のarticle形式以外の、投票( https://akiba-souken.com/vote/ )やアニメまとめ( https://akiba-souken.com/anime/matome/ )、アニメランキング( https://akiba-souken.com/anime/ranking/ )は抜けています。<br />
+    </div>
+  );
+}
diff --git a/src/app/style.css b/src/app/style.css
new file mode 100644
index 0000000..f8a5c5f
--- /dev/null
+++ b/src/app/style.css
@@ -0,0 +1,3 @@
+h1,h2,h3 {
+  all: revert;
+}
diff --git a/src/app/style.module.css b/src/app/style.module.css
new file mode 100644
index 0000000..fd9a86f
--- /dev/null
+++ b/src/app/style.module.css
@@ -0,0 +1,3 @@
+.a {
+  all: revert;
+}
\ No newline at end of file
diff --git a/src/util/animeLoader.ts b/src/util/animeLoader.ts
new file mode 100644
index 0000000..120123b
--- /dev/null
+++ b/src/util/animeLoader.ts
@@ -0,0 +1,93 @@
+import { readFile } from "fs/promises";
+import { z } from "zod";
+const zodType = z.array(
+  z.strictObject({
+    animeId: z.number().int().min(0),
+    title: z.string(),
+    primaryCategory: z.string(),
+    startSeason: z.string(),
+    titleReviewScore: z.object({
+      story: z.number().min(0).nullable(),
+      sakuga: z.number().min(0).nullable(),
+      character: z.number().min(0).nullable(),
+      music: z.number().min(0).nullable(),
+      originality: z.number().min(0).nullable(),
+      storyboard: z.number().min(0).nullable(),
+      voice: z.number().min(0).nullable(),
+      song: z.number().min(0).nullable(),
+      manzokudo: z.number().min(0).nullable(),
+    }),
+    titleReviewList: z.array(
+      z.object({
+        reviewId: z.number().int(),
+        userIconUrl: z.string().url(),
+        userName: z.string(),
+        score: z.number(),
+        isSpoiler: z.boolean(),
+        timestampSec: z.number().int().min(0),
+        commentCount: z.number().int().min(0),
+        iineCount: z.number().int().min(0)
+      }),
+    ),
+    titleHitokotoList: z.array(
+      z.object({
+        hitokotoId: z.number().int(),
+        userIcon: z.string().url(),
+        userName: z.string(),
+        reviewHtml: z.string(),
+        timestampSec: z.number().int(),
+      })
+    ),
+    episodeList: z.array(z.object({
+      episodeId: z.number().int().min(0),
+      subTitle: z.string(),
+      reviewCount: z.number().int().min(0),
+      score: z.number().nullable(),
+    })),
+    episodeHitokotoList: z.array(z.object({
+      episodeId: z.number().int().min(0),
+      hitokotoList: z.array(z.object({
+        hitokotoId: z.number().int().min(0),
+        userIcon: z.string(),
+        userName: z.string().min(1),
+        reviewHtml: z.string().min(1),
+        timestampSec: z.number().int().min(0),
+      }))
+    })),
+  })
+);
+const MAX_ITEM_LIMIT = process.env["AKIBA_SOUKEN_MAX_ITEM_LIMIT"];
+export type AnimeLoaderData = z.infer<typeof zodType>[number]
+class AnimeLoader {
+  constructor() { }
+  private dataCache: Awaited<ReturnType<AnimeLoader["loadData_"]>> | null = null;
+  async loadData() {
+    if (this.dataCache != null) {
+      return this.dataCache;
+    }
+    const loadedData = await this.loadData_();
+    this.dataCache = loadedData;
+    return loadedData;
+  }
+  private async loadData_() {
+    const articleJsonPath = process.env["AKIBA_SOUKEN_ANIME_JSON"]!;
+    //console.log(`[${articleJsonPath}]`);
+    const jsonStr = await readFile(articleJsonPath, { encoding: "utf-8" }).then(text => {
+      const jsonObj = JSON.parse(text);
+      return jsonObj;
+    });
+    const parsedObj = zodType.parse(jsonStr).filter(a => {
+      if (a.titleHitokotoList.length != 0) { return true; }
+      if (a.titleReviewList.length != 0) { return true; }
+      if (a.titleReviewScore.manzokudo != null) { return true; }
+      if (a.episodeList.find(e => e.score != null || e.reviewCount != 0)) { return true; }
+      if (a.episodeHitokotoList.length != 0) { return true; }
+      return false;
+    });
+    if (MAX_ITEM_LIMIT != null) {
+      parsedObj.length = Math.min(Number(MAX_ITEM_LIMIT), parsedObj.length);
+    }
+    return parsedObj;
+  }
+}
+export const animeLoader = new AnimeLoader();
\ No newline at end of file
diff --git a/src/util/articleLoader.ts b/src/util/articleLoader.ts
new file mode 100644
index 0000000..787725a
--- /dev/null
+++ b/src/util/articleLoader.ts
@@ -0,0 +1,88 @@
+import { readFile } from "fs/promises";
+import { z } from "zod";
+const zodType = z.array(
+  z.object({
+    articleId: z.number().int().min(0),
+    title: z.string(),
+    timestampMs: z.number().int().min(0),
+    maxPageNumber: z.number().int().min(1),
+    tags: z.array(z.string()),
+    breadLinks: z.array(z.string()).min(1),
+  })
+);
+const MAX_ITEM_LIMIT = process.env["AKIBA_SOUKEN_MAX_ITEM_LIMIT"];
+export class ArticleLoader {
+  constructor() { }
+  async loadData() {
+    const articleJsonPath = process.env["AKIBA_SOUKEN_ARTICLE_JSON"]!;
+    //console.log(`[${articleJsonPath}]`);
+    const jsonStr = await readFile(articleJsonPath, { encoding: "utf-8" }).then(text => {
+      const jsonObj = JSON.parse(text);
+      return jsonObj;
+    });
+    const parsedObj = zodType.parse(jsonStr);
+    parsedObj.sort((a, b) => {
+      return b.timestampMs - a.timestampMs;
+    });
+    if (MAX_ITEM_LIMIT != null) {
+      parsedObj.length = Math.min(Number(MAX_ITEM_LIMIT), parsedObj.length);
+    }
+    return parsedObj;
+  }
+  async getCategoryList() {
+    const loadedData = await this.loadData();
+    // key:カテゴリ名 , val:回数
+    const categoryCount = new Map<string, number>();
+    for (const a of loadedData) {
+      if (a.breadLinks.length == 0) {
+        continue;
+      }
+      const category = a.breadLinks[0];
+      if (categoryCount.has(category)) {
+        categoryCount.set(category, categoryCount.get(category)! + 1);
+      } else {
+        categoryCount.set(category, 1);
+      }
+    }
+    const categoryList: { name: string, count: number }[] = [];
+    for (const [name, count] of categoryCount) {
+      categoryList.push({ name: name, count });
+    }
+    categoryList.sort((a, b) => {
+      return b.count - a.count;
+    });
+    return categoryList;
+  }
+  async getTagList() {
+    const loadedData = await this.loadData();
+    // key:タグ名 , val:回数
+    const tagCount = new Map<string, number>();
+    for (const a of loadedData) {
+      const tags = new Set<string>();
+      a.tags.forEach(t => {
+        tags.add(t);
+      });
+      // パンくずリストの2件目以降はタグ扱いになっている
+      a.breadLinks.forEach((b, index) => {
+        if (index != 0) {
+          tags.add(b);
+        }
+      })
+      for (const tag of tags) {
+        if (tagCount.has(tag)) {
+          tagCount.set(tag, tagCount.get(tag)! + 1);
+        } else {
+          tagCount.set(tag, 1);
+        }
+      }
+    }
+    const tagList: { name: string, count: number }[] = [];
+    for (const [name, count] of tagCount) {
+      tagList.push({ name: name, count });
+    }
+    tagList.sort((a, b) => {
+      return b.count - a.count;
+    });
+    return tagList;
+  }
+}
diff --git a/src/util/pagenation.ts b/src/util/pagenation.ts
new file mode 100644
index 0000000..15ee01b
--- /dev/null
+++ b/src/util/pagenation.ts
@@ -0,0 +1,91 @@
+export type PagenationProp = {
+  now: number,
+  max: number,
+  between: number,
+}
+export function createPagenation(prop: PagenationProp) {
+  if (prop.between < 0) {
+    throw new Error(`betweenは0以上にして下さい`);
+  }
+  if (prop.max < 0) {
+    throw new Error(`maxは0以上にして下さい`);
+  }
+  if (prop.now < 0) {
+    throw new Error(`nowは0以上にして下さい`);
+  }
+  if (prop.max < prop.now) {
+    throw new Error(`nowの値はmaxと同じか、より小さな値にして下さい. now:${prop.now} , max:${prop.max}`);
+  }
+  if (prop.max == 0) {
+    return [];
+  }
+  const MIN = 1;
+  // 左・中・右の3ブロックの変数を作成
+  const blockLeft = MIN;
+  let blockMiddle = [
+    ...Array.from({ length: prop.between }).map((_, index) => {
+      const i = prop.now - prop.between + index;
+      return i;
+    }),
+    prop.now,
+    ...Array.from({ length: prop.between }).map((_, index) => {
+      const i = prop.now + index + 1;
+      return i;
+    }),
+  ];
+  blockMiddle = blockMiddle.filter(i => {
+    if (i <= blockLeft) {
+      return false;
+    }
+    if (prop.max <= i) {
+      return false;
+    }
+    return true;
+  });
+  const blockRight = prop.max;
+  type A = { type: "back", key: string, link: number | null };
+  type B = { type: "next", key: string, link: number | null };
+  type C = { type: "sp", key: string, };
+  type D = { type: "num", key: string, link: number | null, num: number }
+  // 結合を作成
+  const pageIdList: (A | B | C | D)[] = [];
+  {
+    // 左戻る矢印
+    if (prop.now == MIN) {
+      pageIdList.push({ type: "back", key: "back", link: null });
+    } else {
+      pageIdList.push({ type: "back", key: "back", link: prop.now - 1 });
+    }
+    // 最初のページ
+    pageIdList.push({ type: "num", key: `p-${blockLeft}`, link: blockLeft, num: blockLeft });
+    let lastPageId = blockLeft;
+    // 左と中の間の…を入れるかどうか
+    if (0 < blockMiddle.length && lastPageId + 1 != blockMiddle[0]) {
+      pageIdList.push({ type: "sp", key: "sp-left" });
+    }
+    blockMiddle.forEach(m => {
+      pageIdList.push({ type: "num", key: `p-${m}`, link: m, num: m });
+      lastPageId = m;
+    });
+    if (0 < blockMiddle.length && lastPageId + 1 != blockRight) {
+      // 最後のページ
+      pageIdList.push({ type: "sp", key: "sp-right" });
+    }
+    if (lastPageId != blockRight) {
+      pageIdList.push({ type: "num", key: `p-${blockRight}`, link: blockRight, num: blockRight });
+      lastPageId = blockRight;
+    }
+    // 右矢印
+    if (prop.now == prop.max) {
+      pageIdList.push({ type: "next", key: "next", link: null });
+    } else {
+      pageIdList.push({ type: "next", key: "next", link: prop.now + 1 });
+    }
+    pageIdList.forEach(p => {
+      if ("link" in p && p.link == prop.now) {
+        p.link = null;
+      }
+    })
+  }
+  return pageIdList
+}
\ No newline at end of file