v1.8.0 リリースノート: グローバルナビゲーションの追加など

この記事は Next.js 版の内容です。現在は Astro で構築し直したため、情報が古い可能性があります。当時のリポジトリはこちらにあるので参考にしてください。

最近、知り合いにこの Web サイトを見てもらう機会があった。その際にサイトの回遊がしにくいという率直なフィードバックをもらったので早速改善することにした。

以前のバージョンではグローバルナビゲーション¹は設置していなかった。というのも、KISS の原則に則って、可能な限りシンプルにサイトを構築していきたいと考えていたからである。

だが、機能をシンプルにし過ぎて使い勝手が悪いのは本末転倒だ。やっぱり、サイトのデザインにおいてシンプルであっても多くの人が慣れ親しんだパターンから外れると途端に違和感を感じさせてしまう。そのギリギリを攻めるのが UI/UX デザイナーの腕の見せどころなのだろうなあ。

このサイトではそこまで攻めたことはしない方針なのでヤコブの法則を参考に、世間一般に広く使われているデザインを落とし込んでみた。

Release v1.8.0 · kkhys/me.v2 1.8.0 (2024-06-08) Bug Fixes atom: add screen-reader-only text for Atom button (bd1d9a9) deps: update dependency @hookform/resolvers to v3.6.0 (1d1f80f) deps: update dependency drizzle-orm to v0.3...

github.com

グローバルナビゲーション（とヘッダ）

ヘッダに表示されているメニューがいわゆるグローバルナビゲーションである。今のところメニューにはブログしかないのでシンプルだが、時間があるときにお問い合わせフォームや vlog などを追加していく予定である。

基本的にはシンプルな実装だが、いくつかポイントがあるのでメモ書き程度にまとめてみる。ここではついでにヘッダの実装についての説明も含む。

サイトロゴをコードで生成する

サイトロゴは Illustrator や Canva で作るのが一般的だと思うが、意外と手間なのと、ちょっとした変更が履歴として残らない点がイマイチに感じているのでコードで生成することにした。今後オリジナリティ溢れるロゴを作る機会があれば変えるかもしれない。

基本的な考え方は前回の記事と同じである。以下のコードを Next.js の Route Handlers に設置することで画像を生成できる。

1
import type { NextRequest } from 'next/server';
2
import satori from 'satori';
3

4
export const runtime = 'edge';
5

6
export const GET = async (request: NextRequest) => {
7
  const interMedium = await fetch(new URL('../../../../assets/fonts/Inter-Medium.ttf', import.meta.url)).then((res) =>
8
    res.arrayBuffer(),
9
  );
10

11
  const searchParams = request.nextUrl.searchParams;
12
  const theme = searchParams.get('theme') ?? 'light';
13

14
  const svg = await satori(
15
    <div
16
      style={{
17
        fontSize: 130,
18
        width: '100%',
19
        height: '100%',
20
        display: 'flex',
21
        alignItems: 'center',
22
        justifyContent: 'center',
23
        fontFamily: 'Inter',
24
        fontSmooth: 'antialiased',
25
        color: theme === 'dark' ? '#111113' : '#e6e5e5',
26
        backgroundColor: theme === 'dark' ? '#e6e5e5' : '#111113',
27
      }}
28
    >
29
      K
30
    </div>,
31
    {
32
      width: 256,
33
      height: 256,
34
      fonts: [
35
        {
36
          name: 'Inter',
37
          data: interMedium,
38
          style: 'normal',
39
          weight: 500,
40
        },
41
      ],
42
    },
43
  );
44

45
  return new Response(svg, {
46
    status: 200,
47
    headers: {
48
      'Content-Type': 'image/svg+xml',
49
      'X-Content-Type-Options': 'nosniff',
50
      'cache-control': 'public, immutable, no-transform, max-age=31536000',
51
    },
52
  });
53
};

当初はこれをそのまま img タグから呼び出せば大丈夫だろうと思っていたが、このサイトはダークモードに対応しているため、うまくロゴの色が反転しないという問題が発生した。そこで生成された SVG をコンポーネント化して呼び出すことにした。

1
type IconProps = React.HTMLAttributes<SVGElement>;
2

3
export const Icons = {
4
  logo: (props: IconProps) => (
5
    <svg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256' {...props}>
6
      <rect x='0' y='0' width='256' height='256' className='fill-foreground' />
7
      <path
8
        className='fill-background-lighter'
9
        d='M108.7 170.8L94.4 170.8L94.4 76.3L108.7 76.3L108.7 121.4L109.8 121.4L149.5 76.3L167.4 76.3L129.3 118.9L167.6 170.8L150.4 170.8L119.8 128.6L108.7 141.4L108.7 170.8Z '
10
      />
11
    </svg>
12
  ),
13
};

サイトロゴ自体は静的なので API から呼び出すよりも上記のようにコンポーネントする方が結局は良かった。

選択中のカテゴリにアクセントカラーを

記事一覧ページにおいてブログメニュー内の選択中のカテゴリを色付けするようにした（PC 限定の機能。モバイルはドロワーメニューにした）。これは URL に含まれるクエリパラメータを読み取ることで実現している機能である。

Next.js ではクエリパラメータの取り扱いについては注意が必要で、そのことは以前記事にまとめた（こちら）。今回は useSearchParams を使うことでカテゴリを取得している。以下がそのコード。

1
export const MainNavigation = () => {
2
  const pathname = usePathname();
3
  const searchParams = useSearchParams();
4
  const categoryParam = searchParams.get('category');
5

6
  return (
7
    <div className='mr-4 hidden md:flex'>
8
      ...
9
      <NavigationMenu>
10
        <NavigationMenuList>
11
          <NavigationMenuItem>
12
            <NavigationMenuTrigger>Blog</NavigationMenuTrigger>
13
            <NavigationMenuContent className='min-w-[8rem] p-1'>
14
              <ListItem href='/posts' className={cn(pathname === '/posts' && !categoryParam && 'bg-accent')}>
15
                All Posts
16
              </ListItem>
17
              <Separator className='-mx-1 my-1 h-px w-[calc(100%_+_1rem)]' />
18
              <div className='grid gap-1'>
19
                {categories.map((category, index) => (
20
                  <ListItem
21
                    key={category.slug}
22
                    href={`/posts?category=${category.slug}`}
23
                    className={cn(
24
                      categories.length === index + 1 && 'mb-0.5',
25
                      categoryParam === category.slug && 'bg-accent',
26
                    )}
27
                  >
28
                    {category.title}
29
                  </ListItem>
30
                ))}
31
              </div>
32
            </NavigationMenuContent>
33
          </NavigationMenuItem>
34
          <NavigationMenuIndicator />
35
        </NavigationMenuList>
36
      </NavigationMenu>
37
    </div>
38
  );
39
};

もし pathname が /posts でカテゴリが見つからない場合は即ち All Posts ということになる。 useSearchParams を使う場合は以下のように親要素から Suspense でラップしなければならない点に注意が必要（参考）

1
export const Header = ({ className }: { className?: string }) => {
2
  return (
3
    ...
4
    <Suspense fallback={<MainNavigationFallback />}>
5
      <MainNavigation />
6
    </Suspense>
7
    ...
8
  );
9
};

ページをリロードした際のチラつきを防止するためにちゃんとフォールバックを設定する。当初は Blog という文字列も pathname が /posts であればハイライトするようにしていたが、チラつきの問題を解決できなかったので止めた。

Add a navigation menu · Issue #1076 · kkhys/me.v2 My personal website. Contribute to kkhys/me.v2 development by creating an account on GitHub.

github.com

Add a navigation menu · Issue #1076 · kkhys/me.v2のカバー画像

スクロールに応じてヘッダを表示・非表示させる

ヘッダをページ上部に固定しているサイトを多く見かけるが、ブログのようなコンテンツがメインのサイトにおいては没入感を妨げる要素になり得てしまう。とはいえ、記事の途中までスクロールしたときに別のページが見たくなることも考えられる。

何か良い方法がないか考えるときにまずすることは同様のサービスがどのような UI をしているか調査することである。 Medium や Note を見てみると、両方とも下にスクロールしたときはヘッダが隠れて、上にスクロールしたときはヘッダが現れるような仕様になっていた。

この方法は記事を読むときの人間の動きを考えた良いデザインだと思う。ヤコブの法則的に考えてもそこまで違和感を感じさせることもなさそうなので実装してみた。

動きになめらかさを持たせるために Framer Motionを使用している。

まずはロジック部分。カスタムフックとして切り出してある。

1
export const useHeaderAnimation = () => {
2
  const [animationHeader, setAnimationHeader] = React.useState<boolean | null>(null);
3
  const [previousYPosition, setPreviousYPosition] = React.useState<number>(
4
    typeof window !== 'undefined' ? window.scrollY : 0,
5
  );
6
  const [debouncePreviousYPosition] = useDebounce(previousYPosition, 50);
7
  const headerRef = React.useRef<HTMLElement | null>(null);
8

9
  const headerFrom = () => ({
10
    y: 0,
11
  });
12

13
  const headerTo = (headerHeight: number) => ({
14
    y: -headerHeight,
15
  });
16

17
  const animationState = () => {
18
    if (animationHeader === null || headerRef.current === null) return;
19
    return animationHeader ? headerFrom() : headerTo(headerRef.current.offsetHeight);
20
  };
21

22
  React.useEffect(() => {
23
    const handleScroll = () => {
24
      if (headerRef.current === null) return;
25

26
      const currentYPos = window.scrollY;
27
      const headerHeight = headerRef.current.offsetHeight / 2;
28

29
      if (currentYPos < previousYPosition) {
30
        setAnimationHeader(true);
31
      } else if (currentYPos > headerHeight && currentYPos > previousYPosition) {
32
        setAnimationHeader(false);
33
      }
34

35
      setPreviousYPosition(currentYPos);
36
    };
37

38
    window.addEventListener('scroll', handleScroll, false);
39

40
    return () => window.removeEventListener('scroll', handleScroll, false);
41
  }, [debouncePreviousYPosition, previousYPosition]);
42

43
  return { animationState, headerRef };
44
};

animationState は headerFrom または headerTo であり、ヘッダがどの位置に移動するべきかの情報を返す。 headerRef は React の ref でヘッダ要素の参照を保持している。この ref を使ってヘッダ要素の高さを取得したり、他の DOM 操作を行ったりしている。

続いて、カスタムフック化したロジックを見た目部分の実装に落とし込んでいく。

1
export const Header = ({ className }: { className?: string }) => {
2
  const { animationState, headerRef } = useHeaderAnimation();
3

4
  return (
5
    <motion.header
6
      transition={{ ease: [0.1, 0.25, 0.3, 1], duration: 0.6 }}
7
      animate={animationState()}
8
      ref={headerRef}
9
      className={cn('fixed top-0 w-[calc(100%-var(--removed-body-scroll-bar-size,0px))]', className)}
10
    >
11
      ...
12
    </motion.header>
13
  );
14
};

ここでは motion コンポーネントを使ってアニメーションの動きを制御している。 [0.1, 0.25, 0.3, 1] はカスタムのイージング関数を示している。この辺は少しずつ微調整しながら良い感じの（としか言いようがない）数値を探していく。

Add animation to the header · Issue #1113 · kkhys/me.v2 My personal website. Contribute to kkhys/me.v2 development by creating an account on GitHub.

github.com

Add animation to the header · Issue #1113 · kkhys/me.v2のカバー画像

ヘッダに関してはこれで終わり。

ページネーション

次にページネーションを追加したのでその説明を書き留めていく。

今までは記事数が少なかったのもあり、ページネーションは必要なかった。だが、この記事を書く前の時点で 18 記事あるためそろそろ追加することにした。

ページネーションの他に X のような無限スクロールを実装するという選択肢もあったが、ある程度探したいコンテンツが決まっているブログのようなサービスには向いていないため今回は見送った。

ページネーションと言ってもただ単に分割すれば良いというわけではなく意外と考えることが多い。今回は Amazon の商品一覧ページのような ellipsis（...）付きのページネーションを作っていく。以下がその例。

// 前提としてページ数は 10

// 現在のページ = 1
<Previous ① 2 3 ... 10 Next>

// 現在のページ = 4
<Previous 1 ... 3 ④ 5 ... 10 Next>

// 現在のページ = 10
<Previous 1 ... 8 9 ⑩ Next>

ロジック部分はカスタムフックに切り出した。

1
export const usePagination = (data: Post[], itemsPerPage = 10) => {
2
  const _searchParams = useSearchParams();
3
  const searchParams = React.useMemo(() => new URLSearchParams(_searchParams), [_searchParams]);
4

5
  const router = useRouter();
6

7
  const [currentPage, setCurrentPage] = React.useState(1);
8
  const [currentCategory, setCurrentCategory] = React.useState('all');
9

10
  const maxPage = React.useMemo(() => Math.ceil(data.length / itemsPerPage), [data, itemsPerPage]);
11

12
  const currentData = () => {
13
    const begin = (currentPage - 1) * itemsPerPage;
14
    const end = begin + itemsPerPage;
15
    return data.slice(begin, end);
16
  };
17

18
  const changePage = (newPage: number) => {
19
    const pageNumber = Math.max(1, newPage);
20
    setCurrentPage(() => Math.min(pageNumber, maxPage));
21
    searchParams.set('page', String(pageNumber));
22
    router.replace(`/posts?${searchParams.toString()}`);
23
  };
24

25
  const next = () => changePage(currentPage + 1);
26

27
  const prev = () => changePage(currentPage - 1);
28

29
  const jump = (page: number) => changePage(page);
30

31
  React.useEffect(() => {
32
    const category = searchParams.get('category') ?? 'all';
33

34
    if (currentCategory !== category) {
35
      setCurrentCategory(category ?? 'all');
36
      setCurrentPage(1);
37
      return;
38
    }
39

40
    const page = Number(searchParams.get('page'));
41

42
    if (page && page > 0 && page <= maxPage) {
43
      setCurrentPage(page);
44
    }
45
  }, [currentCategory, maxPage, searchParams]);
46

47
  return { next, prev, jump, currentData, currentPage, maxPage };
48
};

SNS でシェアされることも考えてクエリパラメータにページ数を保持できるようにしてある。例えば https://kkhys.me/posts?category=tech&page=2 のような URL であれば Tech カテゴリの 2 ページ目が表示される。

次にページネーションの UI コンポーネントを作成していく。

1
export const Pagination = ({
2
  className,
3
  next,
4
  prev,
5
  jump,
6
  currentPage,
7
  maxPage,
8
}: {
9
  className?: string;
10
  next: () => void;
11
  prev: () => void;
12
  jump: (page: number) => void;
13
  currentPage: number;
14
  maxPage: number;
15
}) => {
16
  const pages = [...Array(maxPage).keys()].map((i) => i + 1);
17

18
  const hasLeftEllipsis = currentPage > 3;
19
  const hasRightEllipsis = currentPage < maxPage - 2;
20

21
  const leftEdgePage = 1;
22
  const rightEdgePage = maxPage;
23
  let visiblePages: (number | '...')[];
24

25
  if (hasLeftEllipsis && hasRightEllipsis) {
26
    visiblePages = [leftEdgePage, '...', currentPage - 1, currentPage, currentPage + 1, '...', rightEdgePage];
27
  } else if (hasLeftEllipsis && !hasRightEllipsis) {
28
    visiblePages = [leftEdgePage, '...', ...pages.slice(-3)];
29
  } else if (!hasLeftEllipsis && hasRightEllipsis) {
30
    visiblePages = [...pages.slice(0, 3), '...', rightEdgePage];
31
  } else {
32
    visiblePages = pages;
33
  }
34

35
  return (
36
    <_Pagination className={className}>
37
      <PaginationContent>
38
        <PaginationItem>
39
          <PaginationPrevious onClick={prev} isDisabled={currentPage === 1} />
40
        </PaginationItem>
41
        {visiblePages.map((page, i) => (
42
          <PaginationItem key={i} className='hidden sm:block'>
43
            {typeof page === 'string' ? (
44
              <PaginationEllipsis />
45
            ) : (
46
              <PaginationLink onClick={() => jump(page)} isActive={currentPage === page}>
47
                {page}
48
              </PaginationLink>
49
            )}
50
          </PaginationItem>
51
        ))}
52
        <PaginationItem>
53
          <PaginationNext onClick={next} isDisabled={currentPage === maxPage} />
54
        </PaginationItem>
55
      </PaginationContent>
56
    </_Pagination>
57
  );
58
};

表示するページや ellipsis は配列で管理するのがポイント。ページネーション自体のスタイリングは shadcn/uiを使っている。ここではコンポーネント名を見れば大体何が書いてあるのかわかると思うので割愛する（そこが shadcn/ui の優れている点でもある）。

最後にカスタムフックと UI コンポーネントを呼び出せば完成。

1
export const ArticleList = ({
2
  posts: _posts,
3
}: {
4
  posts: Post[];
5
}) => {
6
  const { next, prev, jump, currentData, currentPage, maxPage } = usePagination(_posts);
7

8
  const posts = currentData();
9

10
  return (
11
    <>
12
      ...
13
      {maxPage > 1 && (
14
        <Pagination className='mt-12' next={next} prev={prev} jump={jump} currentPage={currentPage} maxPage={maxPage} />
15
      )}
16
    </>
17
  );
18
};

kkhys/me.v2 My personal website. Contribute to kkhys/me.v2 development by creating an account on GitHub.

github.com

画像のズーム機能

v1.8.0 最後の機能追加として画像のズーム機能を条件付きで追加した。ブラウザが Chrome かつディスプレイの横幅が 768px 以上の場合のみ以下の画像がズームできる。

Framer Motion の Shared layout animationsを使うことで状態を変える際に連続性のある画面遷移アニメーションを行える。 Web 標準の機能で実装する場合は View Transitions APIを使えば同様のことができるが Chrome と Edge にしか対応していないなど、まだ実験段階なので様子を見ている。

Next.js でも Astro のように公式で View Transition をサポートしてくれれば良いのだが（動作例）しばらくは代わりの方法で実装するしかないということで Framer Motion を使ったというわけである²。

一応実装してみたのだが、画像をクリックやタップしたときに一瞬 Blur 画像が表示されてちょっと許容できなかったので唯一影響の少なかった Chrome の PC 版のみリリースした（Chrome でも若干 flickering があるけど）。推測だが、Framer Motion には関係ない next/image が原因のような気がしている。修正に時間がかかりそうなので他のブラウザについては一旦 Pending としている。 View Transition についての根本的な理解を深めてから再度リリースしようと思う。その際に原因について書ければ。