部品 · Technical Documentation
技術資料ビューア
構造化された技術情報を読みやすく確認する資料画面
- 利用範囲
- 技術情報を扱う画面
- 更新日
- 2026-07-10
プレビュー
状態と使い方
技術資料
概要、例、注意事項を同じ画面で確認します。
概要
目的と利用範囲
入力例
必要な項目と形式
結果例
表示内容と読み方
注意事項
制約と代替手段
主な部品
この仕様に含まれるUI
1 件
SwaggerUIWrapper
開発者資料
解剖
表示面
白面、境界、余白を提供し、資料の長い内容をページ本文から分ける。
読込境界
必要になるまで重い表示処理を読み込まず、初期表示を軽く保つ。
仕様
概要、入力例、結果例、注意事項を同じ画面で確認できるようにする。
Loading
600px skeletonで読込中のレイアウト移動を抑える。
状態
loading
資料面の高さを先に確保してSkeletonを表示する。
ready
概要、入力例、結果例、注意事項を一覧で表示する。
spec error
取得失敗をviewer内で示し、周辺ページを巻き込まない。
mobile
長い構造化データの表示領域だけを横スクロールさせる。
仕様値
- 読込
- 必要時のみ
- loading height
- 600px
- surface
- white、border、rounded-lg、padding 16px
- 資料形式
- 構造化された仕様書
- 長い内容
- 資料面の内側だけ横スクロール
運用ルール
初期表示を軽く保つ
資料表示に必要な処理は、資料を開いたときだけ読み込む。
説明を一元化する
画面ごとに同じ技術説明を重複させない。
公開UIと混ぜない
開発者資料の密度と操作を一般ユーザー向け画面へ流用しない。