要素と属性

MockKit は、静的サイトジェネレータで作られたページのタグ構造を解釈して表示します。以下の特別な要素や属性を付与することで、オーバーラップ表示される開発者ノートを埋め込むことができます。

<mk-note> 要素

<mk-note> 要素を見つけると、MockKit はその要素の親要素に対して開発者ノートを付与します。

開発者ノートの内容は <mk-note> 要素内に記述します。HTML を使用することもできます。

<mk-note> 要素内の要素が MockKit に解釈されずそのまま表示されてしまうことを防ぐため、通常は hidden 属性を付与しておくことをお勧めします。

下記の場合、MockKit は <button> 要素に対して開発者ノートを付与します。

<button type="button">
  <mk-note hidden>
    <p>この送信ボタンは状況に応じて下記のラベルとなる。</p>
    <ul>
      <li>通常時: 送信</li>
      <li>新規作成時: 作成</li>
      <li>編集時: 更新</li>
    </ul>
  </mk-note>
  送信
</button>

data-mk-note 属性

<mk-note> 要素の代わりに、任意の HTML 要素に data-mk-note 属性を付与することもできます。

開発者ノートの内容は data-mk-note 属性の値に記述します。HTML は使用できません。\n で改行を表します。

<button
  type="button"
  data-mk-note="この送信ボタンは状況に応じて下記のラベルとなる。\n- 通常時: 送信\n- 新規作成時: 作成\n- 編集時: 更新"
>
  送信
</button>

data-mk-rules 属性

data-mk-rules 属性は、フォーム要素（<input>, <select>, <textarea>）に対して付与できます。

この属性を付与すると、MockKit は自動的にそのフォーム要素の HTML バリデーション属性を解釈し、開発者メモとして表示します。さらに、値に任意の開発者ノートを追記することができます。

下記の場合、MockKit は <input> 要素に対して開発者ノートを付与します。

<input type="number" min="0" max="100" step="0.1" data-mk-rules="上限が100でよいか要検討" />

開発者ノートの追記が不要であれば値は省略できます。

<input type="number" min="0" max="100" step="0.1" data-mk-rules />

data-mk-pos 属性

data-mk-pos 属性は、<mk-note> 要素か、data-mk-note 属性を付与した要素に対して付与できます。

この属性の値に、開発者ノートの表示位置を指定します。

位置の指定は以下の識別子を組み合わせて行います。

識別子	説明
top	縦方向の基準を上端にします。
middle	縦方向の基準を中央にします。
bottom	縦方向の基準を下端にします。
left	横方向の基準を左端にします。
center	横方向の基準を中央にします。
right	横方向の基準を右端にします。
inside	ノートを対象要素の内側に配置します。
boundary	ノートを対象要素の境界に合わせて配置します。
outside	ノートを対象要素の外側にずらして配置します。

デフォルト値は top right boundary です。指定しなかった場合、開発者ノートは要素の右上の境界上に表示されます。

下記の場合、開発者ノートは <input> 要素の下端左端の外側に表示されます。

<input type="number" min="0" max="100" step="0.1" data-mk-rules data-mk-pos="bottom left outside" />

一部の識別子のみ指定することもできます。指定されなかった情報はデフォルト値で補われます。

<input type="number" min="0" max="100" step="0.1" data-mk-rules data-mk-pos="inside" />