MokuToc

要約

問題：MokuDocs 2.0のために作った目次はテンプレートの中で最も特徴的な部分でしたが、79ドルのプロダクトの中に閉じ込められていました。長いページの読者は、今どこにいるのかを知りたい。多くの目次はその要求に、本文の幅から1カラムを常に奪うことで応え、スマートフォンではたいてい姿を消します。

解決策：MokuToc。ページにすでにある見出しを読み取る、単体のFramerコンポーネント。デスクトップでは細い線のレールで、ホバーすると全項目のポップオーバーが開きます。設定可能なブレークポイント以下では、同じエンジンが現在の節名を示す固定バーを描画します。購入者の目に見えるものはすべてプロパティコントロールに出ています。

成果：切り出し、汎用化し、堅牢にし、出品するまでスタジオの兼業時間でおよそ3週間。承認された当日に、公開デモ、設定ページ、6枚の機能紹介画像とともにFramer Marketplaceで15ドルで公開。

概要

MokuTocは、プロダクトとしてではなく、一つの機能として始まりました。スタジオのドキュメントテンプレートMokuDocs 2.0には、カラムを消費しないページ内ナビゲーションが必要で、その答えがCodex風の線のレールでした。本文の端に細い印、手を伸ばせばポップオーバー、現在の節はアクセントカラーで示す。テンプレートのレビューで評判がよく、いつも真っ先に見せたくなる部分でした。

目次はまた、ドキュメントシステムよりはるかに小さな決断で済みます。79ドルのテンプレートは、購入者にドキュメントの公開方法を組み替えることを求めます。15ドルのコンポーネントが求めるのは、レイヤーに一つ名前を付けることだけです。レールを切り出したことで、ずっと広い読者にずっと低い障壁で届くプロダクトが生まれ、スタジオの他の仕事への二つ目の入口にもなりました。

課題

機能からプロダクトへ

MokuDocsの中にいる限り、レールは前提を置けました。ページの構造、ヘッダーの高さ、スクロールコンテナ、テーマの仕組みを知っていたからです。Marketplaceのコンポーネントはそのどれも知りません。購入者がどんな構造を組んでいても見出しを見つけ、本文との間にどんなラッパーがあっても動き、初めて見るページで適切な色を選ばなければなりません。切り出しの作業は、そうした前提を一つずつ洗い出し、自動検出かプロパティコントロールに置き換えていくことがほぼすべてでした。

Framerはスクロールスパイにとって手ごわい環境

コンポーネントの中核の仕事は読者の現在地を知ることですが、Framerのハイドレーションがそれを難しくします。DOMには、スクロールコンテナに見えたのに次の瞬間には違うものになるラッパーが現れます。本文のDOMが見た目そっくりの別物に差し替えられ、キャッシュした要素の参照が切り離されたツリーを測り続けることもあります。一度見つけたスクロール親をそのまま信じ続けると、スパイもクリックでのジャンプも静かに壊れました。すべての参照を、使う瞬間に再検証する必要がありました。

一つのブレークポイント、二つの見せ方

線のレールはスマートフォンでは意味がありません。モバイルの答えは、現在の節名を示し、読者が下へスクロールすると邪魔にならないよう退く固定バーです。両方を出荷するときのリスクは、ずれです。二つの描画が、どの節が現在なのかで静かに食い違う。そこで、この制約をルールにしました。見出しの検出、アンカー、スパイ、ジャンプの論理は一つのエンジンが持ち、ブレークポイントはその状態をどちらの見せ方が使うかだけを決める。

アプローチ

ページを読み、二つ目の目次を持たない

MokuTocは名前を付けたコンテンツレイヤーからH2とH3の見出しを走査し、アンカーのidを割り当て、コンテンツが変わるたびに一覧を組み直します。本文に限定したミューテーションオブザーバー、上限付きのハイドレーションのポーリング、そしてDOMの丸ごとの差し替えを捉えるハートビートによって。維持すべき一覧はなく、文章を変えればナビゲーションが追従します。

レールとポップオーバー

デスクトップの見せ方は意図して静かです。線は高さ2ピクセル。現在の節の線は長く、アクセントカラーになります。ホバーかフォーカスで、すべての見出しを載せた一つのポップオーバーが開きます。レールとの間はマージンではなくパディングでつなぎ、ポインターが渡る途中でポップオーバーが閉じないようにしました。H3の行は、そのページで実際にH2が先行する場合にだけ字下げされます。

ヘッダーを尊重するバー

ブレークポイント以下では、バーはサイトのヘッダーの下に固定され、読者が下へスクロールすると画面上端へ滑り、ヘッダー自身の隠れ方をなぞります。スクロールの向きが固定位置のCSSトランジションを駆動します。タップで全項目が開き、選ぶとジャンプして閉じます。

色はページ自身から

購入者にテーマの仕組みを配線してもらう代わりに、MokuTocは自分が置かれた背景の描画結果をサンプリングし、その輝度からライトかダークかを導きます。テーマ属性とOSの設定はフォールバックです。二つのパレット、合わせて10色は、すべて編集できるプロパティです。

すべてをパネルに

プロパティは八つのグループに育ちました。ラベル、見出しの深さ、設定、レールの形状、ポップオーバー、ライトテーマ、ダークテーマ、モバイル。MokuGraphから受け継いだルールは、購入者にコードを触らせない、です。同じルールがサポートの形も決めました。自作の図を載せた公開デモ記事と、購入者が実際にぶつかる失敗を扱うトラブルシューティングを備えた設定ページ。その筆頭は、原因のほぼすべてを占める、コンテンツレイヤーの名前の不一致です。

チェック項目ではなく機能としてのアクセシビリティ

各線はタブで移動でき、フォーカスするとポップオーバーが開きます。Enterでジャンプ、Escapeで閉じる。モバイルのバーはaria-expandedを持つ本物のボタンで、パネルの項目はaria-currentを持つ本物のアンカーです。視差効果を減らす設定では、スライドとスムーズスクロールをオフにします。これらは出品文にセールスポイントとして書きました。

成果

素材が仕上がった当日に公開

MokuTocは2026年8月23日にFramer Marketplaceへ提出され、同日に承認されました。Navigationカテゴリーに「Minimal table of contents」の一文を添えて15ドルで出品。公開に必要なものは一式そろえて出しました。出品文、実際のページを本物のポインターで操作して録画した8秒のデモ、16:9のカバー、6枚の機能紹介画像、スタジオサイトのプロダクトページの項目、そして購入画面の文言です。

切り出しから学んだこと

実装で最も難しかったのは、見た目ではなく環境です。ホストのページを何も信用しない。キャッシュした参照はすべて再検証する。二つの描画の裏に、一つの真実の源を保つ。これらの型と、目に見える判断をすべてプロパティコントロールに出す規律は、今ではテンプレートの機能を単体のコンポーネントにするときのスタジオの標準手順です。

本番での稼働

このコンポーネントの元になったレールは今もMokuDocs 2.0の中で動いており、単体のコンポーネントは自身の公開デモをナビゲートしています。二つのプロダクトは互いを指しています。テンプレートはレールをシステム全体の中で見せ、コンポーネントはそれ単体で売ります。