diff --git a/design/pages/index/index.pen b/design/pages/index/index.pen new file mode 100644 index 0000000..e6f1009 --- /dev/null +++ b/design/pages/index/index.pen @@ -0,0 +1,2053 @@ +{ + "version": "2.17", + "children": [ + { + "type": "frame", + "id": "Ix014", + "name": "/ - ideal state(1920px)", + "x": 0, + "y": 0, + "clip": true, + "width": 1920, + "height": 1080, + "fill": "$lib:background", + "children": [ + { + "id": "Ix012", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1080 + }, + { + "type": "frame", + "id": "Ix013", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ix011", + "name": "Contents Wrapper (実装 contentsWrapperStyle: margin 16/16/0。viewport.S では 0)", + "width": "fill_container", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "Ix010", + "name": "Card (実装 contentsContainerStyle: maxWidth 820 / radius 8 / padding 24)", + "width": 820, + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "Mb315", + "name": "MdContent（実装 .it-MdContent = Qiita の article.css。デスクトップの実値をそのまま写している。フォントサイズと行送りは em ベースで デザイントークンに受け口が無いため article.css の値（トークン外）をリテラルで置いている。CSS の margin は隣接で相殺されるので、ブロック間は max(前の margin-bottom, 次の margin-top) を上 padding にしてある）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb269", + "name": "img（article.css: bg gray0 / box-shadow 0 0 0 1px divider / max-width 100%）（README 先頭のバナー。中身は利用者のプロジェクトの README.md 次第）（`.it-MdContent > :first-child { margin-top: 0 }` は効かない。実装は `
` と1枚挟むので、最初の `p` の margin-top 16 が内側の div に相殺されて残る — index.tsx:61-65）", + "width": "fill_container", + "height": 260, + "fill": "$lib:gray-0", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb268", + "name": "Placeholder Label", + "fill": "$lib:medium-emphasis-text", + "content": "README の画像", + "lineHeight": 1.5, + "fontFamily": "$lib:font-sans", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb273", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb271", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Mb270", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI、Qiita Preview へようこそ！", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Mb272", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ], + "padding": [ + 56, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb276", + "name": "p（article.css: margin 16-0）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb274", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI とは、手元の環境で記事の執筆・プレビュー・投稿ができるツールです。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Mb275", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI を使うことで、普段お使いのエディタなどを使って記事の執筆・投稿がしやすくなります。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb289", + "name": "ul（article.css: padding-left 1.5em / margin 16-0 / list-style disc）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb280", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Mb278", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Mb277", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Mb279", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事を Markdown で書いてそのままプレビューできる", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Mb284", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Mb282", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Mb281", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Mb283", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "スライド（Marp）にも対応している", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Mb288", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Mb286", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Mb285", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Mb287", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "投稿・更新も CLI から行える", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb293", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb291", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Mb290", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "ご利用の前に", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Mb292", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ], + "padding": [ + 56, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb306", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb303", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb294", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI、Qiita Preview を利用されたら、", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Mb297", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb295", + "name": "Text", + "fill": "$lib:green-text", + "content": "利用規約", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb296", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Mb298", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "、", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Mb301", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb299", + "name": "Text", + "fill": "$lib:green-text", + "content": "プライバシーポリシー", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb300", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Mb302", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "に同意したもの", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Mb305", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb304", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "とみなします。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb308", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb307", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "こちらの記事もご覧ください", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb314", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb313", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Mb311", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb309", + "name": "Text", + "fill": "$lib:green-text", + "content": "Qiita CLI の使い方", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb310", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Mb312", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": " に基本的な流れをまとめています。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ix019", + "name": "/ - not found state(1920px)", + "x": 0, + "y": 1180, + "clip": true, + "width": 1920, + "height": 1080, + "fill": "$lib:background", + "children": [ + { + "id": "Ix017", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1080 + }, + { + "type": "frame", + "id": "Ix018", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ix016", + "name": "Error Message Wrapper (実装 items/index.tsx:66 は

だけ。白カードは出ない)", + "width": "fill_container", + "layout": "vertical", + "padding": "$lib:getSpace(2)", + "children": [ + { + "type": "text", + "id": "Ix015", + "name": "Message（errorMessageStyle は lineHeight 未指定で継承値 1.8）", + "fill": "$lib:high-emphasis-text", + "content": "ファイルが見つかりません", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-subhead2", + "fontWeight": "$lib:fontWeight-normal", + "textAlign": "center", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ix024", + "name": "/ - unknown error state(1920px)", + "x": 0, + "y": 2360, + "clip": true, + "width": 1920, + "height": 1080, + "fill": "$lib:background", + "children": [ + { + "id": "Ix022", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1080 + }, + { + "type": "frame", + "id": "Ix023", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ix021", + "name": "Error Message Wrapper (実装 items/index.tsx:66 は

だけ。白カードは出ない)", + "width": "fill_container", + "layout": "vertical", + "padding": "$lib:getSpace(2)", + "children": [ + { + "type": "text", + "id": "Ix020", + "name": "Message（errorMessageStyle は lineHeight 未指定で継承値 1.8）", + "fill": "$lib:high-emphasis-text", + "content": "不明なエラーが発生しました", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-subhead2", + "fontWeight": "$lib:fontWeight-normal", + "textAlign": "center", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ix038", + "name": "/ - ideal state(1199px)", + "x": 2220, + "y": 0, + "clip": true, + "width": 1199, + "height": 920, + "fill": "$lib:background", + "children": [ + { + "id": "Ix036", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 920 + }, + { + "type": "frame", + "id": "Ix037", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ix035", + "name": "Contents Wrapper (実装 contentsWrapperStyle: margin 16/16/0。viewport.S では 0)", + "width": "fill_container", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "Ix034", + "name": "Card (実装 contentsContainerStyle: maxWidth 820（この幅では効かず fill） / radius 8 / padding 24)", + "width": "fill_container", + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "Mb363", + "name": "MdContent（実装 .it-MdContent = Qiita の article.css。デスクトップの実値をそのまま写している。フォントサイズと行送りは em ベースで デザイントークンに受け口が無いため article.css の値（トークン外）をリテラルで置いている。CSS の margin は隣接で相殺されるので、ブロック間は max(前の margin-bottom, 次の margin-top) を上 padding にしてある）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb317", + "name": "img（article.css: bg gray0 / box-shadow 0 0 0 1px divider / max-width 100%）（README 先頭のバナー。中身は利用者のプロジェクトの README.md 次第）（`.it-MdContent > :first-child { margin-top: 0 }` は効かない。実装は `

` と1枚挟むので、最初の `p` の margin-top 16 が内側の div に相殺されて残る — index.tsx:61-65）", + "width": "fill_container", + "height": 260, + "fill": "$lib:gray-0", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb316", + "name": "Placeholder Label", + "fill": "$lib:medium-emphasis-text", + "content": "README の画像", + "lineHeight": 1.5, + "fontFamily": "$lib:font-sans", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb321", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb319", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Mb318", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI、Qiita Preview へようこそ！", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Mb320", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ], + "padding": [ + 56, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb324", + "name": "p（article.css: margin 16-0）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb322", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI とは、手元の環境で記事の執筆・プレビュー・投稿ができるツールです。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Mb323", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI を使うことで、普段お使いのエディタなどを使って記事の執筆・投稿がしやすくなります。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb337", + "name": "ul（article.css: padding-left 1.5em / margin 16-0 / list-style disc）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb328", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Mb326", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Mb325", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Mb327", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事を Markdown で書いてそのままプレビューできる", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Mb332", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Mb330", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Mb329", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Mb331", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "スライド（Marp）にも対応している", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Mb336", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Mb334", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Mb333", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Mb335", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "投稿・更新も CLI から行える", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb341", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb339", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Mb338", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "ご利用の前に", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Mb340", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ], + "padding": [ + 56, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb354", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb351", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb342", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI、Qiita Preview を利用されたら、", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Mb345", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb343", + "name": "Text", + "fill": "$lib:green-text", + "content": "利用規約", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb344", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Mb346", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "、", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Mb349", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb347", + "name": "Text", + "fill": "$lib:green-text", + "content": "プライバシーポリシー", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb348", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Mb350", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "に同意したも", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Mb353", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb352", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "のとみなします。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb356", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb355", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "こちらの記事もご覧ください", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb362", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb361", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Mb359", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb357", + "name": "Text", + "fill": "$lib:green-text", + "content": "Qiita CLI の使い方", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb358", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Mb360", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": " に基本的な流れをまとめています。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ix057", + "name": "/ - ideal state(375px)", + "x": 3719, + "y": 0, + "clip": true, + "width": 375, + "height": 1172, + "fill": "$lib:background", + "children": [ + { + "type": "frame", + "id": "Ix056", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ix055", + "name": "Toolbar (実装 HeaderIndex。mobileSize = 幅 <= 769 のときだけ出る)", + "width": "fill_container", + "fill": "$lib:surface", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ix053", + "name": "Toolbar Bar", + "width": "fill_container", + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(2)" + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Ix051", + "name": "Menu Button", + "width": 40, + "height": 40, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "Ix050", + "name": "Icon", + "width": 24, + "height": 24, + "icon": "menu", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + }, + { + "type": "frame", + "id": "Ix052", + "name": "Logo", + "width": 118, + "height": 24, + "fill": "$lib:surface-variant", + "cornerRadius": 4, + "children": [] + } + ] + }, + { + "type": "rectangle", + "id": "Ix054", + "name": "Toolbar Rule", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "Ix049", + "name": "Contents Wrapper (実装 contentsWrapperStyle: margin 16/16/0。viewport.S では 0)", + "width": "fill_container", + "padding": 0, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "Ix048", + "name": "Card (実装 contentsContainerStyle: maxWidth 820（この幅では効かず fill） / radius 8 / padding 24)", + "width": "fill_container", + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "Mb419", + "name": "MdContent（実装 .it-MdContent = Qiita の article.css。デスクトップの実値をそのまま写している。フォントサイズと行送りは em ベースで デザイントークンに受け口が無いため article.css の値（トークン外）をリテラルで置いている。CSS の margin は隣接で相殺されるので、ブロック間は max(前の margin-bottom, 次の margin-top) を上 padding にしてある）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb365", + "name": "img（article.css: bg gray0 / box-shadow 0 0 0 1px divider / max-width 100%）（README 先頭のバナー。中身は利用者のプロジェクトの README.md 次第）（`.it-MdContent > :first-child { margin-top: 0 }` は効かない。実装は `
` と1枚挟むので、最初の `p` の margin-top 16 が内側の div に相殺されて残る — index.tsx:61-65）", + "width": "fill_container", + "height": 260, + "fill": "$lib:gray-0", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb364", + "name": "Placeholder Label", + "fill": "$lib:medium-emphasis-text", + "content": "README の画像", + "lineHeight": 1.5, + "fontFamily": "$lib:font-sans", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb369", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb367", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Mb366", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI、Qiita Preview へようこそ！", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Mb368", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ], + "padding": [ + 56, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb372", + "name": "p（article.css: margin 16-0）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb370", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI とは、手元の環境で記事の執筆・プレビュー・投稿ができるツールです。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Mb371", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI を使うことで、普段お使いのエディタなどを使って記事の執筆・投稿がしやすくなります。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb385", + "name": "ul（article.css: padding-left 1.5em / margin 16-0 / list-style disc）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb376", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Mb374", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Mb373", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Mb375", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事を Markdown で書いてそのままプレビューできる", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Mb380", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Mb378", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Mb377", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Mb379", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "スライド（Marp）にも対応している", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Mb384", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Mb382", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Mb381", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Mb383", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "投稿・更新も CLI から行える", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb389", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb387", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Mb386", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "ご利用の前に", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Mb388", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ], + "padding": [ + 56, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb408", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb391", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb390", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI、Qiita Preview を利用さ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Mb400", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb392", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "れたら、", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Mb395", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb393", + "name": "Text", + "fill": "$lib:green-text", + "content": "利用規約", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb394", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Mb396", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "、", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Mb399", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb397", + "name": "Text", + "fill": "$lib:green-text", + "content": "プライバシーポ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb398", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + } + ] + }, + { + "type": "frame", + "id": "Mb405", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Mb403", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb401", + "name": "Text", + "fill": "$lib:green-text", + "content": "リシー", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb402", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Mb404", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "に同意したものとみなします", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Mb407", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb406", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb410", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb409", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "こちらの記事もご覧ください", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb418", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb415", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Mb413", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb411", + "name": "Text", + "fill": "$lib:green-text", + "content": "Qiita CLI の使い方", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb412", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Mb414", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": " に基本的な流れ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Mb417", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb416", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "をまとめています。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "imports": { + "lib": "../../shared-library.lib.pen" + }, + "fileToken": "0063e59a-bd40-4ae8-a056-160179d4755a" +} diff --git a/design/pages/items/items.pen b/design/pages/items/items.pen new file mode 100644 index 0000000..e16f170 --- /dev/null +++ b/design/pages/items/items.pen @@ -0,0 +1,5092 @@ +{ + "version": "2.17", + "children": [ + { + "type": "frame", + "id": "It029", + "name": "/items/[id] - ideal state(1920px)", + "x": 0, + "y": 0, + "clip": true, + "width": 1920, + "height": 1080, + "fill": "$lib:background", + "children": [ + { + "id": "It027", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1080 + }, + { + "type": "frame", + "id": "It028", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It010", + "name": "Toolbar", + "width": "fill_container", + "fill": "$lib:surface", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It008", + "name": "Toolbar Bar", + "width": "fill_container", + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(2)" + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "It004", + "name": "File Path", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It001", + "name": "Path", + "fill": "$lib:high-emphasis-text", + "content": "articles/my-article.md", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "It003", + "name": "Copy Button", + "width": 24, + "height": 24, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "It002", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "content_copy", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It007", + "name": "Publish Button（実装 headerButtonStyle は padding 4/16 + border 2px が padding の外。pen の stroke は strokeAlignment inner でレイアウトに寄与しないため padding を 6/18 にして寸法を合わせた）", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:green-60", + "strokeWidth": 2, + "strokeAlignment": "inner", + "gap": "$lib:getSpace(1/2)", + "padding": [ + 6, + 18 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It005", + "name": "Label", + "fill": "$lib:green-text", + "content": "記事を投稿する", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "icon", + "id": "It006", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "publish", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:green-text" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "It009", + "name": "Toolbar Rule", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "It026", + "name": "Contents Wrapper (実装 contentsWrapperStyle: margin 16/16/0)", + "width": "fill_container", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "It025", + "name": "Card (実装 contentsContainerStyle: maxWidth 820 / radius 8 / padding 24)", + "width": 820, + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "It014", + "name": "ArticleInfo (collapsed)", + "width": "fill_container", + "fill": "$lib:background", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "frame", + "id": "It013", + "name": "Summary (実装 infoSummaryStyle は gap も justify も無く ::after のシェブロンがラベル直後)", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It011", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "記事情報", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "icon", + "id": "It012", + "name": "Toggle Icon (実装は expand_more / expand_less。pen に字形が無く keyboard_arrow_* で代用)", + "width": 16, + "height": 16, + "icon": "keyboard_arrow_up", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It024", + "name": "Article", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "It015", + "name": "Title", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI で記事を書く", + "lineHeight": "$lib:text-headline1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-headline1", + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "frame", + "id": "It020", + "name": "Tag List (実装 tagListWrapStyle: marginTop 8 / gap 8。最後以外のタグは chip の中に \",\" が入る — Article.tsx:31)", + "width": "fill_container", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(1)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "It017", + "name": "Tag", + "cornerRadius": 4, + "padding": [ + 0, + "$lib:getSpace(3/4)" + ], + "children": [ + { + "type": "text", + "id": "It016", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "Qiita,", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "It019", + "name": "Tag", + "cornerRadius": 4, + "padding": [ + 0, + "$lib:getSpace(3/4)" + ], + "children": [ + { + "type": "text", + "id": "It018", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "Markdown", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It023", + "name": "Body (実装 bodyStyle: marginTop 48。中身は Qiita 側 article.css の .it-MdContent)", + "width": "fill_container", + "layout": "vertical", + "padding": [ + "$lib:getSpace(6)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "Ma066", + "name": "MdContent（実装 .it-MdContent = Qiita の article.css。デスクトップの実値をそのまま写している。フォントサイズと行送りは em ベースで デザイントークンに受け口が無いため article.css の値（トークン外）をリテラルで置いている。CSS の margin は隣接で相殺されるので、ブロック間は max(前の margin-bottom, 次の margin-top) を上 padding にしてある）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma004", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma002", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Ma001", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "はじめに", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Ma003", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "Ma016", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma009", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma005", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI を使うと、手元のエディタで記事を書いて ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Ma007", + "name": "Inline Code（article.css: bg rgba(0,0,0,.08) / radius4 / 等幅。合成は #ebebeb で、最も近い $lib:gray-20 = #edeeee）", + "fill": "$lib:gray-20", + "cornerRadius": 4, + "padding": [ + 0, + 4 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma006", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita preview", + "lineHeight": 1.7, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma008", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": " でそのまま確認できます。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Ma015", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma010", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "詳しくは ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Ma013", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma011", + "name": "Text", + "fill": "$lib:green-text", + "content": "公式ガイド", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Ma012", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Ma014", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "をご覧ください。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma029", + "name": "ul（article.css: padding-left 1.5em / margin 16-0 / list-style disc）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma020", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma018", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma017", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma019", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Markdown をそのままプレビューできる", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma024", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma022", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma021", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma023", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事の投稿・更新まで CLI で完結する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma028", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma026", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma025", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma027", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "スライドモードにも対応している", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma031", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma030", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "インストール", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma035", + "name": "code-frame（article.css: radius8 / margin-block 24 / padding 8-16 / bg gray110 / 文字 gray0。pre code は .82em=14 / lh1.5）", + "width": "fill_container", + "fill": "$lib:gray-110", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + 24, + 0, + 0, + 0 + ], + "children": [ + { + "type": "text", + "id": "Ma032", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npm install @qiita/qiita-cli --save-dev", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma033", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npx qiita init", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma034", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npx qiita preview", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma040", + "name": "blockquote（article.css: margin 24-0 / padding 8-16 / 左に 4px の bar（gray30・radius4）/ 文字 mediumEmphasis）", + "width": "fill_container", + "children": [ + { + "type": "rectangle", + "id": "Ma036", + "name": "Bar", + "fill": "$lib:gray-30", + "width": 4, + "height": "fill_container", + "cornerRadius": 4 + }, + { + "type": "frame", + "id": "Ma039", + "name": "Body", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 8, + 16 + ], + "children": [ + { + "type": "text", + "id": "Ma037", + "name": "Line", + "fill": "$lib:medium-emphasis-text", + "content": "Node.js 22.22.1 以上が必要です。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma038", + "name": "Line", + "fill": "$lib:medium-emphasis-text", + "content": "古い環境では qiita preview が起動しません。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 24, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma042", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma041", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "よく使うオプション", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma063", + "name": "table（article.css: margin 16-0 / th は bold・bg surface / td は padding 4-12 / 罫線 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma047", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma044", + "name": "th", + "width": "fill_container", + "fill": "$lib:surface", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma043", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "コマンド", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma046", + "name": "th", + "width": "fill_container", + "fill": "$lib:surface", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma045", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "説明", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma052", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma049", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma048", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita preview", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma051", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma050", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "ブラウザでプレビューを開く", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma057", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma054", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma053", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita publish", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma056", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma055", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事を Qiita に投稿する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma062", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma059", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma058", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita pull", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma061", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma060", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita から記事を取得する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma065", + "name": "p（article.css: margin 16-0）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma064", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "投稿すると記事の状態が「投稿済み」に変わり、差分の表示も消えます。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "It084", + "name": "/items/[id] - article info open state(1920px)", + "x": 0, + "y": 1180, + "clip": true, + "width": 1920, + "height": 1296, + "fill": "$lib:background", + "children": [ + { + "id": "It082", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1296 + }, + { + "type": "frame", + "id": "It083", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It039", + "name": "Toolbar", + "width": "fill_container", + "fill": "$lib:surface", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It037", + "name": "Toolbar Bar", + "width": "fill_container", + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(2)" + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "It033", + "name": "File Path", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It030", + "name": "Path", + "fill": "$lib:high-emphasis-text", + "content": "articles/my-article.md", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "It032", + "name": "Copy Button", + "width": 24, + "height": 24, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "It031", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "content_copy", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It036", + "name": "Publish Button（実装 headerButtonStyle は padding 4/16 + border 2px が padding の外。pen の stroke は strokeAlignment inner でレイアウトに寄与しないため padding を 6/18 にして寸法を合わせた）", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:green-60", + "strokeWidth": 2, + "strokeAlignment": "inner", + "gap": "$lib:getSpace(1/2)", + "padding": [ + 6, + 18 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It034", + "name": "Label", + "fill": "$lib:green-text", + "content": "記事を投稿する", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "icon", + "id": "It035", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "publish", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:green-text" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "It038", + "name": "Toolbar Rule", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "It081", + "name": "Contents Wrapper (実装 contentsWrapperStyle: margin 16/16/0)", + "width": "fill_container", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "It080", + "name": "Card (実装 contentsContainerStyle: maxWidth 820 / radius 8 / padding 24)", + "width": 820, + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "It069", + "name": "ArticleInfo (open)", + "width": "fill_container", + "fill": "$lib:background", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "frame", + "id": "It042", + "name": "Summary (実装 infoSummaryStyle は gap も justify も無く ::after のシェブロンがラベル直後)", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It040", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "記事情報", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "icon", + "id": "It041", + "name": "Toggle Icon (実装は expand_more / expand_less。pen に字形が無く keyboard_arrow_* で代用)", + "width": 16, + "height": 16, + "icon": "keyboard_arrow_down", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + }, + { + "type": "frame", + "id": "It048", + "name": "Info Row (実装 infoListStyle: grid 100px + 1fr / gap 12。2行目以降は marginTop 4)", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "children": [ + { + "type": "frame", + "id": "It046", + "name": "Label Col", + "width": 100, + "children": [ + { + "type": "text", + "id": "It045", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "公開範囲", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-bold" + } + ] + }, + { + "type": "frame", + "id": "It047", + "name": "Value Col", + "width": "fill_container", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "It044", + "name": "Icon", + "width": 14, + "height": 14, + "icon": "public", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + }, + { + "type": "text", + "id": "It043", + "name": "Value", + "fill": "$lib:high-emphasis-text", + "content": "全体", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It053", + "name": "Info Row (実装 infoListStyle: grid 100px + 1fr / gap 12。2行目以降は marginTop 4)", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "children": [ + { + "type": "frame", + "id": "It051", + "name": "Label Col", + "width": 100, + "children": [ + { + "type": "text", + "id": "It050", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "記事の状態", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-bold" + } + ] + }, + { + "type": "frame", + "id": "It052", + "name": "Value Col", + "width": "fill_container", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It049", + "name": "Value", + "fill": "$lib:blue-text", + "content": "投稿済み", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + "$lib:getSpace(1/2)", + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "It058", + "name": "Info Row (実装 infoListStyle: grid 100px + 1fr / gap 12。2行目以降は marginTop 4)", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "children": [ + { + "type": "frame", + "id": "It056", + "name": "Label Col", + "width": 100, + "children": [ + { + "type": "text", + "id": "It055", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "差分", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-bold" + } + ] + }, + { + "type": "frame", + "id": "It057", + "name": "Value Col", + "width": "fill_container", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It054", + "name": "Value", + "fill": "$lib:high-emphasis-text", + "content": "あり", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + "$lib:getSpace(1/2)", + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "It063", + "name": "Info Row (実装 infoListStyle: grid 100px + 1fr / gap 12。2行目以降は marginTop 4)", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "children": [ + { + "type": "frame", + "id": "It061", + "name": "Label Col", + "width": 100, + "children": [ + { + "type": "text", + "id": "It060", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "Organization", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-bold" + } + ] + }, + { + "type": "frame", + "id": "It062", + "name": "Value Col", + "width": "fill_container", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It059", + "name": "Value", + "fill": "$lib:high-emphasis-text", + "content": "紐付けなし", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + "$lib:getSpace(1/2)", + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "It068", + "name": "Info Row (実装 infoListStyle: grid 100px + 1fr / gap 12。2行目以降は marginTop 4)", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "children": [ + { + "type": "frame", + "id": "It066", + "name": "Label Col", + "width": 100, + "children": [ + { + "type": "text", + "id": "It065", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スライドモード", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-bold" + } + ] + }, + { + "type": "frame", + "id": "It067", + "name": "Value Col", + "width": "fill_container", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It064", + "name": "Value", + "fill": "$lib:high-emphasis-text", + "content": "OFF", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + "$lib:getSpace(1/2)", + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ic006", + "name": "Info Row (実装 infoListStyle: grid 100px / minmax(0,1fr)、gap 12、行間は marginTop 4。postingCampaign があるときだけ出る2行 — ArticleInfo.tsx:97-113)", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "children": [ + { + "type": "frame", + "id": "Ic001", + "name": "Label Col", + "width": 100, + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ic002", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "記事投稿キャン", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "text", + "id": "Ic003", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "ペーン", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + } + ] + }, + { + "type": "frame", + "id": "Ic004", + "name": "Value Col", + "width": "fill_container", + "gap": "$lib:getSpace(1/2)", + "children": [ + { + "type": "text", + "id": "Ic005", + "name": "Value", + "fill": "$lib:blue-text", + "content": "お題は不問！Qiita Tech Festa 2026で記事投稿！", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ic011", + "name": "Info Row (実装 infoListStyle: grid 100px / minmax(0,1fr)、gap 12、行間は marginTop 4。postingCampaign があるときだけ出る2行 — ArticleInfo.tsx:97-113)", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "children": [ + { + "type": "frame", + "id": "Ic007", + "name": "Label Col", + "width": 100, + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ic008", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "規約同意", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + } + ] + }, + { + "type": "frame", + "id": "Ic009", + "name": "Value Col", + "width": "fill_container", + "gap": "$lib:getSpace(1/2)", + "children": [ + { + "type": "text", + "id": "Ic010", + "name": "Value", + "fill": "$lib:high-emphasis-text", + "content": "同意済み", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "It079", + "name": "Article", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "It070", + "name": "Title", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI で記事を書く", + "lineHeight": "$lib:text-headline1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-headline1", + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "frame", + "id": "It075", + "name": "Tag List (実装 tagListWrapStyle: marginTop 8 / gap 8。最後以外のタグは chip の中に \",\" が入る — Article.tsx:31)", + "width": "fill_container", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(1)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "It072", + "name": "Tag", + "cornerRadius": 4, + "padding": [ + 0, + "$lib:getSpace(3/4)" + ], + "children": [ + { + "type": "text", + "id": "It071", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "Qiita,", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "It074", + "name": "Tag", + "cornerRadius": 4, + "padding": [ + 0, + "$lib:getSpace(3/4)" + ], + "children": [ + { + "type": "text", + "id": "It073", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "Markdown", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It078", + "name": "Body (実装 bodyStyle: marginTop 48。中身は Qiita 側 article.css の .it-MdContent)", + "width": "fill_container", + "layout": "vertical", + "padding": [ + "$lib:getSpace(6)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "Ma132", + "name": "MdContent（実装 .it-MdContent = Qiita の article.css。デスクトップの実値をそのまま写している。フォントサイズと行送りは em ベースで デザイントークンに受け口が無いため article.css の値（トークン外）をリテラルで置いている。CSS の margin は隣接で相殺されるので、ブロック間は max(前の margin-bottom, 次の margin-top) を上 padding にしてある）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma070", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma068", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Ma067", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "はじめに", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Ma069", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "Ma082", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma075", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma071", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI を使うと、手元のエディタで記事を書いて ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Ma073", + "name": "Inline Code（article.css: bg rgba(0,0,0,.08) / radius4 / 等幅。合成は #ebebeb で、最も近い $lib:gray-20 = #edeeee）", + "fill": "$lib:gray-20", + "cornerRadius": 4, + "padding": [ + 0, + 4 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma072", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita preview", + "lineHeight": 1.7, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma074", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": " でそのまま確認できます。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Ma081", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma076", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "詳しくは ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Ma079", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma077", + "name": "Text", + "fill": "$lib:green-text", + "content": "公式ガイド", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Ma078", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Ma080", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "をご覧ください。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma095", + "name": "ul（article.css: padding-left 1.5em / margin 16-0 / list-style disc）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma086", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma084", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma083", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma085", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Markdown をそのままプレビューできる", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma090", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma088", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma087", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma089", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事の投稿・更新まで CLI で完結する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma094", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma092", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma091", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma093", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "スライドモードにも対応している", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma097", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma096", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "インストール", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma101", + "name": "code-frame（article.css: radius8 / margin-block 24 / padding 8-16 / bg gray110 / 文字 gray0。pre code は .82em=14 / lh1.5）", + "width": "fill_container", + "fill": "$lib:gray-110", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + 24, + 0, + 0, + 0 + ], + "children": [ + { + "type": "text", + "id": "Ma098", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npm install @qiita/qiita-cli --save-dev", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma099", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npx qiita init", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma100", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npx qiita preview", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma106", + "name": "blockquote（article.css: margin 24-0 / padding 8-16 / 左に 4px の bar（gray30・radius4）/ 文字 mediumEmphasis）", + "width": "fill_container", + "children": [ + { + "type": "rectangle", + "id": "Ma102", + "name": "Bar", + "fill": "$lib:gray-30", + "width": 4, + "height": "fill_container", + "cornerRadius": 4 + }, + { + "type": "frame", + "id": "Ma105", + "name": "Body", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 8, + 16 + ], + "children": [ + { + "type": "text", + "id": "Ma103", + "name": "Line", + "fill": "$lib:medium-emphasis-text", + "content": "Node.js 22.22.1 以上が必要です。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma104", + "name": "Line", + "fill": "$lib:medium-emphasis-text", + "content": "古い環境では qiita preview が起動しません。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 24, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma108", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma107", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "よく使うオプション", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma129", + "name": "table（article.css: margin 16-0 / th は bold・bg surface / td は padding 4-12 / 罫線 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma113", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma110", + "name": "th", + "width": "fill_container", + "fill": "$lib:surface", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma109", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "コマンド", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma112", + "name": "th", + "width": "fill_container", + "fill": "$lib:surface", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma111", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "説明", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma118", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma115", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma114", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita preview", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma117", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma116", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "ブラウザでプレビューを開く", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma123", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma120", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma119", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita publish", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma122", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma121", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事を Qiita に投稿する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma128", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma125", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma124", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita pull", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma127", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma126", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita から記事を取得する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma131", + "name": "p（article.css: margin 16-0）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma130", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "投稿すると記事の状態が「投稿済み」に変わり、差分の表示も消えます。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "It089", + "name": "/items/[id] - not found state(1920px)", + "x": 0, + "y": 2576, + "clip": true, + "width": 1920, + "height": 1080, + "fill": "$lib:background", + "children": [ + { + "id": "It087", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1080 + }, + { + "type": "frame", + "id": "It088", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It086", + "name": "Error Message Wrapper (実装 show.tsx の

。ツールバーも白カードも出ない)", + "width": "fill_container", + "layout": "vertical", + "padding": "$lib:getSpace(2)", + "children": [ + { + "type": "text", + "id": "It085", + "name": "Message", + "fill": "$lib:high-emphasis-text", + "content": "ファイルが見つかりません", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-subhead2", + "fontWeight": "$lib:fontWeight-normal", + "textAlign": "center", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "It101", + "name": "/items/[id] - frontmatter error state(1920px)", + "x": 0, + "y": 3756, + "clip": true, + "width": 1920, + "height": 1080, + "fill": "$lib:background", + "children": [ + { + "id": "It099", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1080 + }, + { + "type": "frame", + "id": "It100", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It098", + "name": "Frontmatter Error Wrapper (実装 errorContentsStyle: red10 / radius 8 / margin 24 auto 0 / width fit-content / padding 16 24)", + "width": "fill_container", + "layout": "vertical", + "padding": [ + "$lib:getSpace(3)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "It097", + "name": "Error Box", + "fill": "$lib:red-10", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(3/2)", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(3)" + ], + "children": [ + { + "type": "text", + "id": "It096", + "name": "Title", + "fill": "$lib:high-emphasis-text", + "content": "記事の設定の入力内容に誤りがあるため、プレビューが表示できません", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "frame", + "id": "It092", + "name": "Error Row (実装 errorStyle: 2行目以降は marginTop 12)", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "It090", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "error", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:red-60" + }, + { + "type": "text", + "id": "It091", + "name": "Message", + "fill": "$lib:high-emphasis-text", + "content": "titleは必須です", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "It095", + "name": "Error Row (実装 errorStyle: 2行目以降は marginTop 12)", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "It093", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "error", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:red-60" + }, + { + "type": "text", + "id": "It094", + "name": "Message", + "fill": "$lib:high-emphasis-text", + "content": "tagsは1つ以上必要です", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + } + ], + "alignItems": "center" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It130", + "name": "/items/[id] - ideal state(1199px)", + "x": 2220, + "y": 0, + "clip": true, + "width": 1199, + "height": 1080, + "fill": "$lib:background", + "children": [ + { + "id": "It128", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1080 + }, + { + "type": "frame", + "id": "It129", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It111", + "name": "Toolbar", + "width": "fill_container", + "fill": "$lib:surface", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It109", + "name": "Toolbar Bar", + "width": "fill_container", + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(2)" + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "It105", + "name": "File Path", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It102", + "name": "Path", + "fill": "$lib:high-emphasis-text", + "content": "articles/my-article.md", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "It104", + "name": "Copy Button", + "width": 24, + "height": 24, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "It103", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "content_copy", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It108", + "name": "Publish Button（実装 headerButtonStyle は padding 4/16 + border 2px が padding の外。pen の stroke は strokeAlignment inner でレイアウトに寄与しないため padding を 6/18 にして寸法を合わせた）", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:green-60", + "strokeWidth": 2, + "strokeAlignment": "inner", + "gap": "$lib:getSpace(1/2)", + "padding": [ + 6, + 18 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It106", + "name": "Label", + "fill": "$lib:green-text", + "content": "記事を投稿する", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "icon", + "id": "It107", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "publish", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:green-text" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "It110", + "name": "Toolbar Rule", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "It127", + "name": "Contents Wrapper (実装 contentsWrapperStyle: margin 16/16/0)", + "width": "fill_container", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "It126", + "name": "Card (実装 contentsContainerStyle: maxWidth 820（この幅では効かず fill） / radius 8 / padding 24)", + "width": "fill_container", + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "It115", + "name": "ArticleInfo (collapsed)", + "width": "fill_container", + "fill": "$lib:background", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "frame", + "id": "It114", + "name": "Summary (実装 infoSummaryStyle は gap も justify も無く ::after のシェブロンがラベル直後)", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It112", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "記事情報", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "icon", + "id": "It113", + "name": "Toggle Icon (実装は expand_more / expand_less。pen に字形が無く keyboard_arrow_* で代用)", + "width": 16, + "height": 16, + "icon": "keyboard_arrow_up", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It125", + "name": "Article", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "It116", + "name": "Title", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI で記事を書く", + "lineHeight": "$lib:text-headline1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-headline1", + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "frame", + "id": "It121", + "name": "Tag List (実装 tagListWrapStyle: marginTop 8 / gap 8。最後以外のタグは chip の中に \",\" が入る — Article.tsx:31)", + "width": "fill_container", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(1)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "It118", + "name": "Tag", + "cornerRadius": 4, + "padding": [ + 0, + "$lib:getSpace(3/4)" + ], + "children": [ + { + "type": "text", + "id": "It117", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "Qiita,", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "It120", + "name": "Tag", + "cornerRadius": 4, + "padding": [ + 0, + "$lib:getSpace(3/4)" + ], + "children": [ + { + "type": "text", + "id": "It119", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "Markdown", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It124", + "name": "Body (実装 bodyStyle: marginTop 48。中身は Qiita 側 article.css の .it-MdContent)", + "width": "fill_container", + "layout": "vertical", + "padding": [ + "$lib:getSpace(6)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "Ma198", + "name": "MdContent（実装 .it-MdContent = Qiita の article.css。デスクトップの実値をそのまま写している。フォントサイズと行送りは em ベースで デザイントークンに受け口が無いため article.css の値（トークン外）をリテラルで置いている。CSS の margin は隣接で相殺されるので、ブロック間は max(前の margin-bottom, 次の margin-top) を上 padding にしてある）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma136", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma134", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Ma133", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "はじめに", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Ma135", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "Ma148", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma141", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma137", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI を使うと、手元のエディタで記事を書いて ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Ma139", + "name": "Inline Code（article.css: bg rgba(0,0,0,.08) / radius4 / 等幅。合成は #ebebeb で、最も近い $lib:gray-20 = #edeeee）", + "fill": "$lib:gray-20", + "cornerRadius": 4, + "padding": [ + 0, + 4 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma138", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita preview", + "lineHeight": 1.7, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma140", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": " でそのまま確認できます", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Ma147", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma142", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "。詳しくは ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Ma145", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma143", + "name": "Text", + "fill": "$lib:green-text", + "content": "公式ガイド", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Ma144", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Ma146", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "をご覧ください。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma161", + "name": "ul（article.css: padding-left 1.5em / margin 16-0 / list-style disc）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma152", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma150", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma149", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma151", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Markdown をそのままプレビューできる", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma156", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma154", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma153", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma155", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事の投稿・更新まで CLI で完結する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma160", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma158", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma157", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma159", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "スライドモードにも対応している", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma163", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma162", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "インストール", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma167", + "name": "code-frame（article.css: radius8 / margin-block 24 / padding 8-16 / bg gray110 / 文字 gray0。pre code は .82em=14 / lh1.5）", + "width": "fill_container", + "fill": "$lib:gray-110", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + 24, + 0, + 0, + 0 + ], + "children": [ + { + "type": "text", + "id": "Ma164", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npm install @qiita/qiita-cli --save-dev", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma165", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npx qiita init", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma166", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npx qiita preview", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma172", + "name": "blockquote（article.css: margin 24-0 / padding 8-16 / 左に 4px の bar（gray30・radius4）/ 文字 mediumEmphasis）", + "width": "fill_container", + "children": [ + { + "type": "rectangle", + "id": "Ma168", + "name": "Bar", + "fill": "$lib:gray-30", + "width": 4, + "height": "fill_container", + "cornerRadius": 4 + }, + { + "type": "frame", + "id": "Ma171", + "name": "Body", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 8, + 16 + ], + "children": [ + { + "type": "text", + "id": "Ma169", + "name": "Line", + "fill": "$lib:medium-emphasis-text", + "content": "Node.js 22.22.1 以上が必要です。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma170", + "name": "Line", + "fill": "$lib:medium-emphasis-text", + "content": "古い環境では qiita preview が起動しません。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 24, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma174", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma173", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "よく使うオプション", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma195", + "name": "table（article.css: margin 16-0 / th は bold・bg surface / td は padding 4-12 / 罫線 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma179", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma176", + "name": "th", + "width": "fill_container", + "fill": "$lib:surface", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma175", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "コマンド", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma178", + "name": "th", + "width": "fill_container", + "fill": "$lib:surface", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma177", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "説明", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma184", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma181", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma180", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita preview", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma183", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma182", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "ブラウザでプレビューを開く", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma189", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma186", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma185", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita publish", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma188", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma187", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事を Qiita に投稿する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma194", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma191", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma190", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita pull", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma193", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma192", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita から記事を取得する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma197", + "name": "p（article.css: margin 16-0）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma196", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "投稿すると記事の状態が「投稿済み」に変わり、差分の表示も消えます。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "It160", + "name": "/items/[id] - ideal state(375px)", + "x": 3719, + "y": 0, + "clip": true, + "width": 375, + "height": 1414, + "fill": "$lib:background", + "children": [ + { + "type": "frame", + "id": "It159", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It142", + "name": "Toolbar", + "width": "fill_container", + "fill": "$lib:surface", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It140", + "name": "Toolbar Bar", + "width": "fill_container", + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(2)" + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "It136", + "name": "Header Item", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "It132", + "name": "Menu Button", + "width": 40, + "height": 40, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "It131", + "name": "Icon", + "width": 24, + "height": 24, + "icon": "menu", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + }, + { + "type": "frame", + "id": "It135", + "name": "Copy Row (実装 mobileHeaderCopyButtonStyle: grid 1fr/16px + gap 4)", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It133", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "ファイルパスをコピー", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "icon", + "id": "It134", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "content_copy", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It139", + "name": "Publish Button（実装 headerButtonStyle は padding 4/16 + border 2px が padding の外。pen の stroke は strokeAlignment inner でレイアウトに寄与しないため padding を 6/18 にして寸法を合わせた）", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:green-60", + "strokeWidth": 2, + "strokeAlignment": "inner", + "gap": "$lib:getSpace(1/2)", + "padding": [ + 6, + 18 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It137", + "name": "Label", + "fill": "$lib:green-text", + "content": "投稿する", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "icon", + "id": "It138", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "publish", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:green-text" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "It141", + "name": "Toolbar Rule", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "It158", + "name": "Contents Wrapper (実装 contentsWrapperStyle: margin 16/16/0)", + "width": "fill_container", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "It157", + "name": "Card (実装 contentsContainerStyle: maxWidth 820（この幅では効かず fill） / radius 8 / padding 24)", + "width": "fill_container", + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "It146", + "name": "ArticleInfo (collapsed)", + "width": "fill_container", + "fill": "$lib:background", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "frame", + "id": "It145", + "name": "Summary (実装 infoSummaryStyle は gap も justify も無く ::after のシェブロンがラベル直後)", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It143", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "記事情報", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "icon", + "id": "It144", + "name": "Toggle Icon (実装は expand_more / expand_less。pen に字形が無く keyboard_arrow_* で代用)", + "width": 16, + "height": 16, + "icon": "keyboard_arrow_up", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It156", + "name": "Article", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "It147", + "name": "Title", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI で記事を書く", + "lineHeight": "$lib:text-headline1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-headline1", + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "frame", + "id": "It152", + "name": "Tag List (実装 tagListWrapStyle: marginTop 8 / gap 8。最後以外のタグは chip の中に \",\" が入る — Article.tsx:31)", + "width": "fill_container", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(1)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "It149", + "name": "Tag", + "cornerRadius": 4, + "padding": [ + 0, + "$lib:getSpace(3/4)" + ], + "children": [ + { + "type": "text", + "id": "It148", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "Qiita,", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "It151", + "name": "Tag", + "cornerRadius": 4, + "padding": [ + 0, + "$lib:getSpace(3/4)" + ], + "children": [ + { + "type": "text", + "id": "It150", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "Markdown", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It155", + "name": "Body (実装 bodyStyle: marginTop 48。中身は Qiita 側 article.css の .it-MdContent)", + "width": "fill_container", + "layout": "vertical", + "padding": [ + "$lib:getSpace(6)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "Ma267", + "name": "MdContent（実装 .it-MdContent = Qiita の article.css。デスクトップの実値をそのまま写している。フォントサイズと行送りは em ベースで デザイントークンに受け口が無いため article.css の値（トークン外）をリテラルで置いている。CSS の margin は隣接で相殺されるので、ブロック間は max(前の margin-bottom, 次の margin-top) を上 padding にしてある）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma202", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma200", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Ma199", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "はじめに", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Ma201", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "Ma217", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma204", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma203", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI を使うと、手元のエディ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Ma209", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma205", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "タで記事を書いて ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Ma207", + "name": "Inline Code（article.css: bg rgba(0,0,0,.08) / radius4 / 等幅。合成は #ebebeb で、最も近い $lib:gray-20 = #edeeee）", + "fill": "$lib:gray-20", + "cornerRadius": 4, + "padding": [ + 0, + 4 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma206", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita preview", + "lineHeight": 1.7, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma208", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": " で", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Ma211", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma210", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "そのまま確認できます。詳しくは ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Ma216", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Ma214", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma212", + "name": "Text", + "fill": "$lib:green-text", + "content": "公式ガイド", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Ma213", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Ma215", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "をご覧ください。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma230", + "name": "ul（article.css: padding-left 1.5em / margin 16-0 / list-style disc）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma221", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma219", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma218", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma220", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Markdown をそのままプレビューできる", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma225", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma223", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma222", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma224", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事の投稿・更新まで CLI で完結する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma229", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma227", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma226", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma228", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "スライドモードにも対応している", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma232", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma231", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "インストール", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma236", + "name": "code-frame（article.css: radius8 / margin-block 24 / padding 8-16 / bg gray110 / 文字 gray0。pre code は .82em=14 / lh1.5）", + "width": "fill_container", + "fill": "$lib:gray-110", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + 24, + 0, + 0, + 0 + ], + "children": [ + { + "type": "text", + "id": "Ma233", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npm install @qiita/qiita-cli --save-dev", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma234", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npx qiita init", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma235", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npx qiita preview", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma241", + "name": "blockquote（article.css: margin 24-0 / padding 8-16 / 左に 4px の bar（gray30・radius4）/ 文字 mediumEmphasis）", + "width": "fill_container", + "children": [ + { + "type": "rectangle", + "id": "Ma237", + "name": "Bar", + "fill": "$lib:gray-30", + "width": 4, + "height": "fill_container", + "cornerRadius": 4 + }, + { + "type": "frame", + "id": "Ma240", + "name": "Body", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 8, + 16 + ], + "children": [ + { + "type": "text", + "id": "Ma238", + "name": "Line", + "fill": "$lib:medium-emphasis-text", + "content": "Node.js 22.22.1 以上が必要です。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma239", + "name": "Line", + "fill": "$lib:medium-emphasis-text", + "content": "古い環境では qiita preview が起動しません。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 24, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma243", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma242", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "よく使うオプション", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma264", + "name": "table（article.css: margin 16-0 / th は bold・bg surface / td は padding 4-12 / 罫線 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma248", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma245", + "name": "th", + "width": "fill_container", + "fill": "$lib:surface", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma244", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "コマンド", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma247", + "name": "th", + "width": "fill_container", + "fill": "$lib:surface", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma246", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "説明", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma253", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma250", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma249", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita preview", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma252", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma251", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "ブラウザでプレビューを開く", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma258", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma255", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma254", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita publish", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma257", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma256", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事を Qiita に投稿する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma263", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma260", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma259", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita pull", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma262", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma261", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita から記事を取得する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma266", + "name": "p（article.css: margin 16-0）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma265", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "投稿すると記事の状態が「投稿済み」に変わり、差分の表示も消えます。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "imports": { + "lib": "../../shared-library.lib.pen" + }, + "fileToken": "48d68feb-5b1d-4838-9982-f095268d9e69" +} diff --git a/design/pages/slides/slides.pen b/design/pages/slides/slides.pen new file mode 100644 index 0000000..bcd20d9 --- /dev/null +++ b/design/pages/slides/slides.pen @@ -0,0 +1,3928 @@ +{ + "version": "2.17", + "children": [ + { + "type": "frame", + "id": "C5fAd", + "x": 0, + "y": 0, + "name": "MarpSlideFrame", + "fill": "$lib:surface", + "cornerRadius": 12, + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "text", + "id": "S709zu", + "name": "Title", + "fill": "$lib:high-emphasis-text", + "content": "MarpSlideFrame", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "frame", + "id": "MsQiL", + "name": "Size", + "layout": "vertical", + "gap": "$lib:getSpace(1/2)", + "children": [ + { + "type": "text", + "id": "exeuG", + "name": "Group Label", + "fill": "$lib:high-emphasis-text", + "content": "Size", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "frame", + "id": "YnRSP", + "name": "Size Row", + "gap": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "EnCOw", + "name": "Item / 480", + "layout": "vertical", + "gap": "$lib:getSpace(1/2)", + "children": [ + { + "type": "text", + "id": "QxFKL", + "name": "Item Label", + "fill": "$lib:high-emphasis-text", + "content": "480x270 (16:9)", + "fontFamily": "$lib:font-sans", + "fontSize": 10, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "N3tg9B", + "name": "MarpSlideFrame", + "context": "qiita-cli の Preview では src/client/components/MarpSlideViewer/index.tsx が aspect-ratio 16/9 の Shadow DOM に Marp の CSS と SVG をそのまま流し込む。中身は SVG ごと等比スケールされるので、375px では文字も比例して小さくなる。ここに置いてあるのは寸法と代表的な中身で、フォントサイズはトークンの下限に丸めてある スライドの中身（タイトル・本文）のフォントサイズと太さは代表値。Marp のテーマ CSS は Shadow DOM に流し込まれるので qiita-cli のトークン（`Weight.bold` = 600）とは無関係で、リポジトリに `*.css` が無いため実際の値は確認できない。 行送り（lineHeight）も同じく代表値で、実装側は `LineHeight.subhead` を1箇所も使っていないので不一致ではないが、Marp のテーマ CSS が読めないので裏付けは取れない。 プレビュー側のスライドは各 Page の ref に 1px の枠（$lib:divider）を付けている。実装 MarpSlideViewer/index.tsx の pageStyle は boxShadow だが、影を止めて枠にしたいという指摘を受けて差し替えた提案。プレゼンモード（?present=1）は全画面なので枠を付けていない。", + "reusable": true, + "clip": true, + "width": 480, + "height": 270, + "fill": "$lib:gray-0", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "padding": [ + "$lib:getSpace(4)", + "$lib:getSpace(5)" + ], + "justifyContent": "center", + "children": [ + { + "type": "text", + "id": "ZZdKa", + "name": "Slide Title", + "fill": "$lib:high-emphasis-text", + "content": "Qiita のスライド機能", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-headline1", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "text", + "id": "D6HOm", + "name": "Slide Body", + "fill": "$lib:high-emphasis-text", + "content": "Markdown で書いて、そのまま発表する", + "lineHeight": "$lib:text-subhead1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-subhead1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "XECFK", + "x": 1028, + "y": 0, + "name": "/slides/[id] - ideal state(1920px)", + "clip": true, + "width": 1920, + "height": 1867, + "fill": "$lib:background", + "children": [ + { + "id": "BpwuB", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1867 + }, + { + "type": "frame", + "id": "nU3yX", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "W416dg", + "name": "Toolbar", + "width": "fill_container", + "fill": "$lib:surface", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "TGzjQ", + "name": "Toolbar Bar", + "width": "fill_container", + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(2)" + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "AFSPz", + "name": "File Path", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "G5kkq", + "name": "Path", + "fill": "$lib:high-emphasis-text", + "content": "slides/my-slide.md", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Q78F7n", + "name": "Copy Button", + "width": 24, + "height": 24, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "YnsjL", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "content_copy", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "TVgZDC", + "name": "Actions", + "gap": "$lib:getSpace(1)", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "UyQWJI", + "name": "スライドショーを開始 Button（実装 Header.tsx:146-156 は padding 4/16 + border 2px が padding の外に付いて高さ 41px になる。pen の stroke は strokeAlignment inner でレイアウトに寄与しないため padding を 6/18 にして寸法を合わせた）", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:gray-border", + "strokeWidth": 2, + "strokeAlignment": "inner", + "gap": "$lib:getSpace(1/2)", + "padding": [ + 6, + 18 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "aFX8ch", + "name": "Label", + "fill": "$lib:gray-text", + "content": "スライドショーを開始", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "icon", + "id": "hXV5P1", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "slideshow", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:gray-text" + } + ] + }, + { + "type": "frame", + "id": "4Pm7xE", + "name": "スライドを投稿する Button（実装 Header.tsx:146-156 は padding 4/16 + border 2px が padding の外に付いて高さ 41px になる。pen の stroke は strokeAlignment inner でレイアウトに寄与しないため padding を 6/18 にして寸法を合わせた）", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:green-60", + "strokeWidth": 2, + "strokeAlignment": "inner", + "gap": "$lib:getSpace(1/2)", + "padding": [ + 6, + 18 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "iu4k3T", + "name": "Label", + "fill": "$lib:green-text", + "content": "スライドを投稿する", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "icon", + "id": "2zcaWY", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "publish", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:green-text" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "xsRky", + "name": "Toolbar Rule", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "sIsXi", + "name": "Contents Wrapper", + "width": "fill_container", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "e3HFWB", + "name": "Card", + "width": 820, + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "NCe61", + "name": "SlideInfo (collapsed)", + "width": "fill_container", + "fill": "$lib:background", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "frame", + "id": "a0zKq", + "name": "Summary (実装 SlideInfo.tsx:83-91 は justify-content も gap も無く、::after のシェブロンがラベル直後に付く)", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "gVtlP", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スライド情報", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "icon", + "id": "YzMtw", + "name": "Toggle Icon (実装は expand_less / pen に字形が無く keyboard_arrow_up で代用)", + "width": 16, + "height": 16, + "icon": "keyboard_arrow_up", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "R9FOhu", + "name": "Viewer", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "npOX3", + "name": "Page 1", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "id": "l2nYS3", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide 1", + "width": 772, + "height": 434, + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner" + }, + { + "type": "frame", + "id": "SwY1by", + "name": "Speaker Note", + "context": "speaker_note は src/lib/view-models/slides.ts:3 でページごとの string[] として API から渡っているが、MarpSlideViewer/index.tsx は現状これを描画していない。ここは「追加したい」という指摘を受けて描いた提案で、本文はリポジトリから読めないため代表値。", + "width": "fill_container", + "fill": "$lib:surface-variant", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "text", + "id": "3rWuWi", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スピーカーノート", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "NTtt38", + "name": "Body", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Marp のスライドを Qiita CLI からそのまま投稿できることを話す", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "bhbiC", + "name": "Page 2", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "id": "ucgDx", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide 2", + "width": 772, + "height": 434, + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "descendants": { + "ZZdKa": { + "content": "スライドの作り方" + }, + "D6HOm": { + "content": "--- で区切るだけ" + } + } + }, + { + "type": "frame", + "id": "qSFzXg", + "name": "Speaker Note", + "context": "speaker_note は src/lib/view-models/slides.ts:3 でページごとの string[] として API から渡っているが、MarpSlideViewer/index.tsx は現状これを描画していない。ここは「追加したい」という指摘を受けて描いた提案で、本文はリポジトリから読めないため代表値。", + "width": "fill_container", + "fill": "$lib:surface-variant", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "text", + "id": "QRck6H", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スピーカーノート", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "mvgA4d", + "name": "Body", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "--- の区切りだけでページが増えることをデモする", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "AVNDQw", + "name": "Page 3", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "id": "KV1aVw", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide 3", + "width": 772, + "height": 434, + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "descendants": { + "ZZdKa": { + "content": "投稿する" + }, + "D6HOm": { + "content": "qiita publish で Qiita へ" + } + } + }, + { + "type": "frame", + "id": "Chgrwj", + "name": "Speaker Note", + "context": "speaker_note は src/lib/view-models/slides.ts:3 でページごとの string[] として API から渡っているが、MarpSlideViewer/index.tsx は現状これを描画していない。ここは「追加したい」という指摘を受けて描いた提案で、本文はリポジトリから読めないため代表値。", + "width": "fill_container", + "fill": "$lib:surface-variant", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "text", + "id": "v0cqTy", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スピーカーノート", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "tWScSe", + "name": "Body", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "qiita publish の実演。投稿後の URL を見せる", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "v1QXI", + "x": 5622, + "y": 0, + "name": "/slides/[id]?present=1 - ideal state(1920px)", + "clip": true, + "width": 1920, + "height": 1080, + "fill": "$lib:surface", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ne879", + "name": "Stage", + "width": "fill_container", + "height": "fill_container", + "children": [ + { + "id": "QLe2m", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide（実装は 1920×1080 を左上基準で描き、下端 42px がフッターの外へはみ出して隠れる）", + "width": 1920, + "height": 1080 + } + ] + } + ] + }, + { + "type": "frame", + "id": "MEmND", + "x": 1028, + "y": 7238, + "name": "/slides/[id] - frontmatter error state(1920px)", + "clip": true, + "width": 1920, + "height": 1080, + "fill": "$lib:background", + "children": [ + { + "id": "ltb0n", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1080 + }, + { + "type": "frame", + "id": "zqO65", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "v2Ct5", + "name": "Contents Wrapper", + "width": "fill_container", + "padding": [ + "$lib:getSpace(3)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "K6HKJn", + "name": "Frontmatter Error Panel (実装は show.tsx:126-139 / ツールバーも白カードも出ない)", + "fill": "$lib:red-10", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(3/2)", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(3)" + ], + "children": [ + { + "type": "text", + "id": "BIXcE", + "name": "Error Title", + "fill": "$lib:high-emphasis-text", + "content": "スライドの設定の入力内容に誤りがあるため、プレビューが表示できません", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "frame", + "id": "O2tek", + "name": "Error Row 1", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "KbIfp", + "name": "Error Icon (実装は MaterialSymbol fill=true / pen は Outlined のみ)", + "width": 16, + "height": 16, + "icon": "error", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:red-60" + }, + { + "type": "text", + "id": "DBime", + "name": "Error Message 1", + "fill": "$lib:high-emphasis-text", + "content": "theme に指定できない値が入っています", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "rcga9", + "name": "Error Row 2", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "RaDDV", + "name": "Error Icon (実装は MaterialSymbol fill=true / pen は Outlined のみ)", + "width": 16, + "height": 16, + "icon": "error", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:red-60" + }, + { + "type": "text", + "id": "pWSyO", + "name": "Error Message 2", + "fill": "$lib:high-emphasis-text", + "content": "title は必須です", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ZE6Nn", + "x": 1028, + "y": 1967, + "name": "/slides/[id] - slide info open state(1920px)", + "clip": true, + "width": 1920, + "height": 1979, + "fill": "$lib:background", + "children": [ + { + "id": "rdiqm", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1979 + }, + { + "type": "frame", + "id": "T5FjG", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "mNpfe", + "name": "Toolbar", + "width": "fill_container", + "fill": "$lib:surface", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "kkzak", + "name": "Toolbar Bar", + "width": "fill_container", + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(2)" + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "MMUjD", + "name": "File Path", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "qkuH7", + "name": "Path", + "fill": "$lib:high-emphasis-text", + "content": "slides/my-slide.md", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Xivmd", + "name": "Copy Button", + "width": 24, + "height": 24, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "DSYSF", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "content_copy", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PwWh1j", + "name": "Actions", + "gap": "$lib:getSpace(1)", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "KGAhU9", + "name": "スライドショーを開始 Button（実装 Header.tsx:146-156 は padding 4/16 + border 2px が padding の外に付いて高さ 41px になる。pen の stroke は strokeAlignment inner でレイアウトに寄与しないため padding を 6/18 にして寸法を合わせた）", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:gray-border", + "strokeWidth": 2, + "strokeAlignment": "inner", + "gap": "$lib:getSpace(1/2)", + "padding": [ + 6, + 18 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "qjzgfQ", + "name": "Label", + "fill": "$lib:gray-text", + "content": "スライドショーを開始", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "icon", + "id": "DO2cIV", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "slideshow", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:gray-text" + } + ] + }, + { + "type": "frame", + "id": "KTx3UZ", + "name": "スライドを投稿する Button（実装 Header.tsx:146-156 は padding 4/16 + border 2px が padding の外に付いて高さ 41px になる。pen の stroke は strokeAlignment inner でレイアウトに寄与しないため padding を 6/18 にして寸法を合わせた）", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:green-60", + "strokeWidth": 2, + "strokeAlignment": "inner", + "gap": "$lib:getSpace(1/2)", + "padding": [ + 6, + 18 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "s6QbfX", + "name": "Label", + "fill": "$lib:green-text", + "content": "スライドを投稿する", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "icon", + "id": "Xy80uO", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "publish", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:green-text" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "nV23B", + "name": "Toolbar Rule", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "GsxNH", + "name": "Contents Wrapper", + "width": "fill_container", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "KW1HN", + "name": "Card", + "width": 820, + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "FK8Rw", + "name": "SlideInfo (open)", + "width": "fill_container", + "fill": "$lib:background", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "frame", + "id": "WfPys", + "name": "Summary (実装 SlideInfo.tsx:83-91 は justify-content も gap も無く、::after のシェブロンがラベル直後に付く)", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "D4n6L", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スライド情報", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "icon", + "id": "LU7Y8", + "name": "Toggle Icon (実装は expand_more / pen に字形が無く keyboard_arrow_down で代用)", + "width": 16, + "height": 16, + "icon": "keyboard_arrow_down", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + }, + { + "type": "frame", + "id": "EhmFo", + "name": "Info Row / タイトル", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "children": [ + { + "type": "text", + "id": "K57JIE", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": 100, + "content": "タイトル", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "text", + "id": "c3Zrrm", + "name": "Value", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Qiita のスライド機能", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "T5raEP", + "name": "Info Row / テーマ", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "padding": [ + "$lib:getSpace(1/2)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "text", + "id": "eH86T", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": 100, + "content": "テーマ", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "text", + "id": "Mhorh", + "name": "Value", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "未設定", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "GqE4g", + "name": "Info Row / スライドの状態", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "padding": [ + "$lib:getSpace(1/2)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "text", + "id": "uTxct", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": 100, + "content": "スライドの状態", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "text", + "id": "lnilS", + "name": "Value", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "未投稿", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "UNCLW", + "name": "Info Row / ページ数", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "padding": [ + "$lib:getSpace(1/2)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "text", + "id": "Y7PwcZ", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": 100, + "content": "ページ数", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "text", + "id": "lTlv8", + "name": "Value", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "3", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "KL73q", + "name": "Viewer", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "MPydS", + "name": "Page 1", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "id": "ILu2B", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide 1", + "width": 772, + "height": 434, + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner" + }, + { + "type": "frame", + "id": "S1uW3K", + "name": "Speaker Note", + "context": "speaker_note は src/lib/view-models/slides.ts:3 でページごとの string[] として API から渡っているが、MarpSlideViewer/index.tsx は現状これを描画していない。ここは「追加したい」という指摘を受けて描いた提案で、本文はリポジトリから読めないため代表値。", + "width": "fill_container", + "fill": "$lib:surface-variant", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "text", + "id": "o0BM55", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スピーカーノート", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "rE2ysS", + "name": "Body", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Marp のスライドを Qiita CLI からそのまま投稿できることを話す", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ZIggFv", + "name": "Page 2", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "id": "6C82sw", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide 2", + "width": 772, + "height": 434, + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "descendants": { + "ZZdKa": { + "content": "スライドの作り方" + }, + "D6HOm": { + "content": "--- で区切るだけ" + } + } + }, + { + "type": "frame", + "id": "bOOds1", + "name": "Speaker Note", + "context": "speaker_note は src/lib/view-models/slides.ts:3 でページごとの string[] として API から渡っているが、MarpSlideViewer/index.tsx は現状これを描画していない。ここは「追加したい」という指摘を受けて描いた提案で、本文はリポジトリから読めないため代表値。", + "width": "fill_container", + "fill": "$lib:surface-variant", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "text", + "id": "GMJDLY", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スピーカーノート", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "noLzNY", + "name": "Body", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "--- の区切りだけでページが増えることをデモする", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "RNXIaS", + "name": "Page 3", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "id": "7rYErx", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide 3", + "width": 772, + "height": 434, + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "descendants": { + "ZZdKa": { + "content": "投稿する" + }, + "D6HOm": { + "content": "qiita publish で Qiita へ" + } + } + }, + { + "type": "frame", + "id": "ylXsmh", + "name": "Speaker Note", + "context": "speaker_note は src/lib/view-models/slides.ts:3 でページごとの string[] として API から渡っているが、MarpSlideViewer/index.tsx は現状これを描画していない。ここは「追加したい」という指摘を受けて描いた提案で、本文はリポジトリから読めないため代表値。", + "width": "fill_container", + "fill": "$lib:surface-variant", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "text", + "id": "6fxWmG", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スピーカーノート", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "2UjXp7", + "name": "Body", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "qiita publish の実演。投稿後の URL を見せる", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "FxcUM", + "x": 4747, + "y": 0, + "name": "/slides/[id] - ideal state(375px)", + "clip": true, + "width": 375, + "height": 1157, + "fill": "$lib:background", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "cAmuC", + "name": "Toolbar", + "width": "fill_container", + "fill": "$lib:surface", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "khsXg", + "name": "Toolbar Bar", + "width": "fill_container", + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(2)" + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RUaYR", + "name": "Mobile Left", + "width": "fill_container", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "O2SBxM", + "name": "Menu Button", + "width": 40, + "height": 40, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "EWPZr", + "name": "Icon", + "width": 24, + "height": 24, + "icon": "menu", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + }, + { + "type": "frame", + "id": "mhInX", + "name": "Copy Label + Button (実装は grid 1fr 16px)", + "width": "fill_container", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "JX2yh", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "ファイルパスをコピー", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "s3aW6I", + "name": "Copy Button（実装は grid の 16px 列。デスクトップの CopyButton は padding 4 + icon 16 = 24 だが、モバイルは 16px 列に入る）", + "width": 16, + "height": 16, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "fn0im", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "content_copy", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "MinK7h", + "name": "Actions", + "gap": "$lib:getSpace(1)", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "7M9BEE", + "name": "スライドショーを開始 Icon Button", + "context": "375px（breakpoint.S = 769 以下）ではラベルを畳んでアイコンだけにする提案。実装は現状ラベルを短く差し替えるだけ（Header.tsx:157）で、アイコンボタンは無い。タップ領域を 44×44 以上にするため padding を getSpace(2) にして 48×48 にしてある。", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:gray-border", + "strokeWidth": 2, + "strokeAlignment": "inner", + "padding": "$lib:getSpace(2)", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "rWSFUl", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "slideshow", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:gray-text" + } + ] + }, + { + "type": "frame", + "id": "iYL04L", + "name": "スライドを投稿する Icon Button", + "context": "375px（breakpoint.S = 769 以下）ではラベルを畳んでアイコンだけにする提案。実装は現状ラベルを短く差し替えるだけ（Header.tsx:157）で、アイコンボタンは無い。タップ領域を 44×44 以上にするため padding を getSpace(2) にして 48×48 にしてある。", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:green-60", + "strokeWidth": 2, + "strokeAlignment": "inner", + "padding": "$lib:getSpace(2)", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "zrbNaN", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "publish", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:green-text" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "WtZfc", + "name": "Toolbar Rule", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "lMmKR", + "name": "Contents Wrapper", + "width": "fill_container", + "layout": "vertical", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "frame", + "id": "XiBQt", + "name": "Card", + "width": "fill_container", + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "b3PEAl", + "name": "SlideInfo (collapsed)", + "width": "fill_container", + "fill": "$lib:background", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "frame", + "id": "IIhqq", + "name": "Summary (実装 SlideInfo.tsx:83-91 は justify-content も gap も無く、::after のシェブロンがラベル直後に付く)", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "aytcM", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スライド情報", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "icon", + "id": "QG9Hr", + "name": "Toggle Icon (実装は expand_less / pen に字形が無く keyboard_arrow_up で代用)", + "width": 16, + "height": 16, + "icon": "keyboard_arrow_up", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "DXSYi", + "name": "Viewer", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "t69Ev", + "name": "Page 1", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "id": "UINzS", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide 1 (実装は Marp の SVG ごと等比縮小されるので中身の余白も縮むが、pen の ref は padding をスケールしないため 375px 用に上書きしている)", + "width": 295, + "height": 166, + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(3/2)" + ], + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "descendants": { + "ZZdKa": { + "content": "Qiita のスライド機能", + "fontSize": "$lib:text-body1", + "lineHeight": "$lib:text-body1-dense-line-height" + }, + "D6HOm": { + "content": "Markdown で書いて、そのまま発表する", + "fontSize": "$lib:text-body3", + "lineHeight": "$lib:text-body3-line-height" + } + } + }, + { + "type": "frame", + "id": "Yz4zUi", + "name": "Speaker Note", + "context": "speaker_note は src/lib/view-models/slides.ts:3 でページごとの string[] として API から渡っているが、MarpSlideViewer/index.tsx は現状これを描画していない。ここは「追加したい」という指摘を受けて描いた提案で、本文はリポジトリから読めないため代表値。", + "width": "fill_container", + "fill": "$lib:surface-variant", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "text", + "id": "PS4fis", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スピーカーノート", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "a8qaTc", + "name": "Body", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Marp のスライドを Qiita CLI からそのまま投稿できることを話す", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ZNzcO", + "name": "Page 2", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "id": "aTLdJ", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide 2 (実装は Marp の SVG ごと等比縮小されるので中身の余白も縮むが、pen の ref は padding をスケールしないため 375px 用に上書きしている)", + "width": 295, + "height": 166, + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(3/2)" + ], + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "descendants": { + "ZZdKa": { + "content": "スライドの作り方", + "fontSize": "$lib:text-body1", + "lineHeight": "$lib:text-body1-dense-line-height" + }, + "D6HOm": { + "content": "--- で区切るだけ", + "fontSize": "$lib:text-body3", + "lineHeight": "$lib:text-body3-line-height" + } + } + }, + { + "type": "frame", + "id": "KmKlAj", + "name": "Speaker Note", + "context": "speaker_note は src/lib/view-models/slides.ts:3 でページごとの string[] として API から渡っているが、MarpSlideViewer/index.tsx は現状これを描画していない。ここは「追加したい」という指摘を受けて描いた提案で、本文はリポジトリから読めないため代表値。", + "width": "fill_container", + "fill": "$lib:surface-variant", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "text", + "id": "cXGrUN", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スピーカーノート", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "rSCpxz", + "name": "Body", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "--- の区切りだけでページが増えることをデモする", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Nu4JX", + "name": "Page 3", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "id": "EAt5w", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide 3 (実装は Marp の SVG ごと等比縮小されるので中身の余白も縮むが、pen の ref は padding をスケールしないため 375px 用に上書きしている)", + "width": 295, + "height": 166, + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(3/2)" + ], + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "descendants": { + "ZZdKa": { + "content": "投稿する", + "fontSize": "$lib:text-body1", + "lineHeight": "$lib:text-body1-dense-line-height" + }, + "D6HOm": { + "content": "qiita publish で Qiita へ", + "fontSize": "$lib:text-body3", + "lineHeight": "$lib:text-body3-line-height" + } + } + }, + { + "type": "frame", + "id": "RJln34", + "name": "Speaker Note", + "context": "speaker_note は src/lib/view-models/slides.ts:3 でページごとの string[] として API から渡っているが、MarpSlideViewer/index.tsx は現状これを描画していない。ここは「追加したい」という指摘を受けて描いた提案で、本文はリポジトリから読めないため代表値。", + "width": "fill_container", + "fill": "$lib:surface-variant", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "text", + "id": "ICnuo5", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スピーカーノート", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "EEWnyT", + "name": "Body", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "qiita publish の実演。投稿後の URL を見せる", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "NYISF", + "x": 1028, + "y": 4046, + "name": "/slides/[id] - validation warning state(1920px)", + "clip": true, + "width": 1920, + "height": 1912, + "fill": "$lib:background", + "children": [ + { + "id": "cWhks", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1912 + }, + { + "type": "frame", + "id": "phjyh", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "c2WjhT", + "name": "Toolbar", + "width": "fill_container", + "fill": "$lib:surface", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "CuGJZ", + "name": "Toolbar Bar", + "width": "fill_container", + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(2)" + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RMBbD", + "name": "File Path", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "vmtj0", + "name": "Path", + "fill": "$lib:high-emphasis-text", + "content": "slides/my-slide.md", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "U53xW", + "name": "Copy Button", + "width": 24, + "height": 24, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "sTzqx", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "content_copy", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "6NNCJF", + "name": "Actions", + "gap": "$lib:getSpace(1)", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "10Lo38", + "name": "スライドショーを開始 Button（実装 Header.tsx:146-156 は padding 4/16 + border 2px が padding の外に付いて高さ 41px になる。pen の stroke は strokeAlignment inner でレイアウトに寄与しないため padding を 6/18 にして寸法を合わせた）", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:gray-border", + "strokeWidth": 2, + "strokeAlignment": "inner", + "gap": "$lib:getSpace(1/2)", + "padding": [ + 6, + 18 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SoKWG1", + "name": "Label", + "fill": "$lib:gray-text", + "content": "スライドショーを開始", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "icon", + "id": "vV3Uw1", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "slideshow", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:gray-text" + } + ] + }, + { + "type": "frame", + "id": "QY3CcM", + "name": "スライドを投稿する Button（実装 Header.tsx:146-156 は padding 4/16 + border 2px が padding の外に付いて高さ 41px になる。pen の stroke は strokeAlignment inner でレイアウトに寄与しないため padding を 6/18 にして寸法を合わせた）", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:green-60", + "strokeWidth": 2, + "strokeAlignment": "inner", + "gap": "$lib:getSpace(1/2)", + "padding": [ + 6, + 18 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "7uDBpw", + "name": "Label", + "fill": "$lib:green-text", + "content": "スライドを投稿する", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "icon", + "id": "AE9NSe", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "publish", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:green-text" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "HIeQp", + "name": "Toolbar Rule", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "cfMlc", + "name": "Contents Wrapper", + "width": "fill_container", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "HSNY1", + "name": "Card", + "width": 820, + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "gjvjY", + "name": "SlideInfo (collapsed)", + "width": "fill_container", + "fill": "$lib:background", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "frame", + "id": "vklHV", + "name": "Summary (実装 SlideInfo.tsx:83-91 は justify-content も gap も無く、::after のシェブロンがラベル直後に付く)", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "L0vGm", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スライド情報", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "icon", + "id": "fnYJk", + "name": "Toggle Icon (実装は expand_less / pen に字形が無く keyboard_arrow_up で代用)", + "width": 16, + "height": 16, + "icon": "keyboard_arrow_up", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "pgvUz", + "name": "Validation Warning (実装は SlideInfo.tsx:137-155 / details の外・背景も枠も無い)", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(3/2)", + "children": [ + { + "type": "frame", + "id": "KbVRV", + "name": "Warning Row 1", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "uZiDs", + "name": "Warning Icon (実装は MaterialSymbol fill=true / pen は Outlined のみ)", + "width": 16, + "height": 16, + "icon": "error", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:yellow-60" + }, + { + "type": "text", + "id": "U9fgTE", + "name": "Warning Message 1", + "fill": "$lib:high-emphasis-text", + "content": "theme が未設定のため既定のテーマで表示しています", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "BRmGn", + "name": "Viewer", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "Q5O1yv", + "name": "Page 1", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "id": "COqR4", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide 1", + "width": 772, + "height": 434, + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner" + }, + { + "type": "frame", + "id": "zVV4H8", + "name": "Speaker Note", + "context": "speaker_note は src/lib/view-models/slides.ts:3 でページごとの string[] として API から渡っているが、MarpSlideViewer/index.tsx は現状これを描画していない。ここは「追加したい」という指摘を受けて描いた提案で、本文はリポジトリから読めないため代表値。", + "width": "fill_container", + "fill": "$lib:surface-variant", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "text", + "id": "0tdH48", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スピーカーノート", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "B5FOSp", + "name": "Body", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Marp のスライドを Qiita CLI からそのまま投稿できることを話す", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "o1GVh", + "name": "Page 2", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "id": "JtEOo", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide 2", + "width": 772, + "height": 434, + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "descendants": { + "ZZdKa": { + "content": "スライドの作り方" + }, + "D6HOm": { + "content": "--- で区切るだけ" + } + } + }, + { + "type": "frame", + "id": "d1FVkf", + "name": "Speaker Note", + "context": "speaker_note は src/lib/view-models/slides.ts:3 でページごとの string[] として API から渡っているが、MarpSlideViewer/index.tsx は現状これを描画していない。ここは「追加したい」という指摘を受けて描いた提案で、本文はリポジトリから読めないため代表値。", + "width": "fill_container", + "fill": "$lib:surface-variant", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "text", + "id": "xFkMdj", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スピーカーノート", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "4Olan0", + "name": "Body", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "--- の区切りだけでページが増えることをデモする", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dxUYkv", + "name": "Page 3", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "id": "ogYXgG", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide 3", + "width": 772, + "height": 434, + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "descendants": { + "ZZdKa": { + "content": "投稿する" + }, + "D6HOm": { + "content": "qiita publish で Qiita へ" + } + } + }, + { + "type": "frame", + "id": "ZJi0Ss", + "name": "Speaker Note", + "context": "speaker_note は src/lib/view-models/slides.ts:3 でページごとの string[] として API から渡っているが、MarpSlideViewer/index.tsx は現状これを描画していない。ここは「追加したい」という指摘を受けて描いた提案で、本文はリポジトリから読めないため代表値。", + "width": "fill_container", + "fill": "$lib:surface-variant", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "text", + "id": "ESBwwo", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スピーカーノート", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "OKgVE8", + "name": "Body", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "qiita publish の実演。投稿後の URL を見せる", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "FJc81", + "x": 1028, + "y": 6058, + "name": "/slides/[id] - not found state(1920px)", + "clip": true, + "width": 1920, + "height": 1080, + "fill": "$lib:background", + "children": [ + { + "id": "h0U6j", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1080 + }, + { + "type": "frame", + "id": "veBRQ", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "DK9QP", + "name": "Error Message Wrapper (実装 show.tsx:117 は

だけ。ツールバーも白カードも出ない)", + "width": "fill_container", + "layout": "vertical", + "padding": "$lib:getSpace(2)", + "children": [ + { + "type": "text", + "id": "NBzsW", + "name": "Message（実装の errorMessageStyle は lineHeight 未指定で、継承値 1.8 が効く。subhead2 のトークン 1.6 ではなく body の 1.8 を当てている）", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "ファイルが見つかりません", + "lineHeight": "$lib:text-body1-line-height", + "textAlign": "center", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-subhead2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "REGq9", + "x": 3248, + "y": 0, + "name": "/slides/[id] - ideal state(1199px)", + "clip": true, + "width": 1199, + "height": 1846, + "fill": "$lib:background", + "children": [ + { + "id": "NB8cE", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1846 + }, + { + "type": "frame", + "id": "afT7Q", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "p9XcA", + "name": "Toolbar", + "width": "fill_container", + "fill": "$lib:surface", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "gqrxQ", + "name": "Toolbar Bar", + "width": "fill_container", + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(2)" + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ILPVJ", + "name": "File Path", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "UUQdh", + "name": "Path", + "fill": "$lib:high-emphasis-text", + "content": "slides/my-slide.md", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "J3N3M", + "name": "Copy Button", + "width": 24, + "height": 24, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "ReWFR", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "content_copy", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "fDMK6I", + "name": "Actions", + "gap": "$lib:getSpace(1)", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "yu9km6", + "name": "スライドショーを開始 Button（実装 Header.tsx:146-156 は padding 4/16 + border 2px が padding の外に付いて高さ 41px になる。pen の stroke は strokeAlignment inner でレイアウトに寄与しないため padding を 6/18 にして寸法を合わせた）", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:gray-border", + "strokeWidth": 2, + "strokeAlignment": "inner", + "gap": "$lib:getSpace(1/2)", + "padding": [ + 6, + 18 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "pWClup", + "name": "Label", + "fill": "$lib:gray-text", + "content": "スライドショーを開始", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "icon", + "id": "vxHBxT", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "slideshow", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:gray-text" + } + ] + }, + { + "type": "frame", + "id": "wFMOCx", + "name": "スライドを投稿する Button（実装 Header.tsx:146-156 は padding 4/16 + border 2px が padding の外に付いて高さ 41px になる。pen の stroke は strokeAlignment inner でレイアウトに寄与しないため padding を 6/18 にして寸法を合わせた）", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:green-60", + "strokeWidth": 2, + "strokeAlignment": "inner", + "gap": "$lib:getSpace(1/2)", + "padding": [ + 6, + 18 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "gaqLkK", + "name": "Label", + "fill": "$lib:green-text", + "content": "スライドを投稿する", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "icon", + "id": "jwGz4U", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "publish", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:green-text" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "lPhNI", + "name": "Toolbar Rule", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "t9JoC", + "name": "Contents Wrapper", + "width": "fill_container", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "suFBI", + "name": "Card", + "width": 807, + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "I1z3q", + "name": "SlideInfo (collapsed)", + "width": "fill_container", + "fill": "$lib:background", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "frame", + "id": "l6GmH5", + "name": "Summary (実装 SlideInfo.tsx:83-91 は justify-content も gap も無く、::after のシェブロンがラベル直後に付く)", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "G8sltP", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スライド情報", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "icon", + "id": "r28nt", + "name": "Toggle Icon (実装は expand_less / pen に字形が無く keyboard_arrow_up で代用)", + "width": 16, + "height": 16, + "icon": "keyboard_arrow_up", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "J9lW8X", + "name": "Viewer", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "iW14L", + "name": "Page 1", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "id": "OOFLF", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide 1", + "width": 759, + "height": 427, + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner" + }, + { + "type": "frame", + "id": "o6so6J", + "name": "Speaker Note", + "context": "speaker_note は src/lib/view-models/slides.ts:3 でページごとの string[] として API から渡っているが、MarpSlideViewer/index.tsx は現状これを描画していない。ここは「追加したい」という指摘を受けて描いた提案で、本文はリポジトリから読めないため代表値。", + "width": "fill_container", + "fill": "$lib:surface-variant", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "text", + "id": "2uioto", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スピーカーノート", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "Tz3M3f", + "name": "Body", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Marp のスライドを Qiita CLI からそのまま投稿できることを話す", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "b6tH2", + "name": "Page 2", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "id": "z0s3D", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide 2", + "width": 759, + "height": 427, + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "descendants": { + "ZZdKa": { + "content": "スライドの作り方" + }, + "D6HOm": { + "content": "--- で区切るだけ" + } + } + }, + { + "type": "frame", + "id": "lrHVc8", + "name": "Speaker Note", + "context": "speaker_note は src/lib/view-models/slides.ts:3 でページごとの string[] として API から渡っているが、MarpSlideViewer/index.tsx は現状これを描画していない。ここは「追加したい」という指摘を受けて描いた提案で、本文はリポジトリから読めないため代表値。", + "width": "fill_container", + "fill": "$lib:surface-variant", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "text", + "id": "94IKt2", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スピーカーノート", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "FkJqhs", + "name": "Body", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "--- の区切りだけでページが増えることをデモする", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "fmG4up", + "name": "Page 3", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "id": "Iz5l37", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide 3", + "width": 759, + "height": 427, + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "descendants": { + "ZZdKa": { + "content": "投稿する" + }, + "D6HOm": { + "content": "qiita publish で Qiita へ" + } + } + }, + { + "type": "frame", + "id": "8pRfGl", + "name": "Speaker Note", + "context": "speaker_note は src/lib/view-models/slides.ts:3 でページごとの string[] として API から渡っているが、MarpSlideViewer/index.tsx は現状これを描画していない。ここは「追加したい」という指摘を受けて描いた提案で、本文はリポジトリから読めないため代表値。", + "width": "fill_container", + "fill": "$lib:surface-variant", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "text", + "id": "F5otgX", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スピーカーノート", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "oVPExq", + "name": "Body", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "qiita publish の実演。投稿後の URL を見せる", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "z9MwTG", + "x": 3248, + "y": 1946, + "name": "/slides/[id] - slide info open state(1199px)", + "clip": true, + "width": 1199, + "height": 1958, + "fill": "$lib:background", + "children": [ + { + "id": "WGMOL", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1958 + }, + { + "type": "frame", + "id": "oaQvZ", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "TY6bo", + "name": "Toolbar", + "width": "fill_container", + "fill": "$lib:surface", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "H9kByQ", + "name": "Toolbar Bar", + "width": "fill_container", + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(2)" + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "uMzqu", + "name": "File Path", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "MsPUP", + "name": "Path", + "fill": "$lib:high-emphasis-text", + "content": "slides/my-slide.md", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "hqw4m", + "name": "Copy Button", + "width": 24, + "height": 24, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "lgwOM", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "content_copy", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "NdDPwD", + "name": "Actions", + "gap": "$lib:getSpace(1)", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "iR2nhE", + "name": "スライドショーを開始 Button（実装 Header.tsx:146-156 は padding 4/16 + border 2px が padding の外に付いて高さ 41px になる。pen の stroke は strokeAlignment inner でレイアウトに寄与しないため padding を 6/18 にして寸法を合わせた）", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:gray-border", + "strokeWidth": 2, + "strokeAlignment": "inner", + "gap": "$lib:getSpace(1/2)", + "padding": [ + 6, + 18 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "7JKciS", + "name": "Label", + "fill": "$lib:gray-text", + "content": "スライドショーを開始", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "icon", + "id": "2OqKcd", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "slideshow", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:gray-text" + } + ] + }, + { + "type": "frame", + "id": "D9Ivvq", + "name": "スライドを投稿する Button（実装 Header.tsx:146-156 は padding 4/16 + border 2px が padding の外に付いて高さ 41px になる。pen の stroke は strokeAlignment inner でレイアウトに寄与しないため padding を 6/18 にして寸法を合わせた）", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:green-60", + "strokeWidth": 2, + "strokeAlignment": "inner", + "gap": "$lib:getSpace(1/2)", + "padding": [ + 6, + 18 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "XDsjPW", + "name": "Label", + "fill": "$lib:green-text", + "content": "スライドを投稿する", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "icon", + "id": "vWAfHo", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "publish", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:green-text" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "ktj0v", + "name": "Toolbar Rule", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "UHXqI", + "name": "Contents Wrapper", + "width": "fill_container", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "CA9Fr", + "name": "Card", + "width": 807, + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "jvS24", + "name": "SlideInfo (open)", + "width": "fill_container", + "fill": "$lib:background", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "frame", + "id": "Zjxcp", + "name": "Summary (実装 SlideInfo.tsx:83-91 は justify-content も gap も無く、::after のシェブロンがラベル直後に付く)", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "fqP5h", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スライド情報", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "icon", + "id": "hlLow", + "name": "Toggle Icon (実装は expand_more / pen に字形が無く keyboard_arrow_down で代用)", + "width": 16, + "height": 16, + "icon": "keyboard_arrow_down", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + }, + { + "type": "frame", + "id": "pkkdp", + "name": "Info Row / タイトル", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "children": [ + { + "type": "text", + "id": "RQR8c", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": 100, + "content": "タイトル", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "text", + "id": "aIBdx", + "name": "Value", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Qiita のスライド機能", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "xFWfM", + "name": "Info Row / テーマ", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "padding": [ + "$lib:getSpace(1/2)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "text", + "id": "OZczz", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": 100, + "content": "テーマ", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "text", + "id": "E5cCeD", + "name": "Value", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "未設定", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "gC9VO", + "name": "Info Row / スライドの状態", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "padding": [ + "$lib:getSpace(1/2)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "text", + "id": "ECkg6", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": 100, + "content": "スライドの状態", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "text", + "id": "Oc4YN", + "name": "Value", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "未投稿", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "lYdgr", + "name": "Info Row / ページ数", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "padding": [ + "$lib:getSpace(1/2)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "text", + "id": "Lm3lZ", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": 100, + "content": "ページ数", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "text", + "id": "SBWB6", + "name": "Value", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "3", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "G8qytK", + "name": "Viewer", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "AcXf2", + "name": "Page 1", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "id": "T135y", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide 1", + "width": 759, + "height": 427, + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner" + }, + { + "type": "frame", + "id": "7WQLIj", + "name": "Speaker Note", + "context": "speaker_note は src/lib/view-models/slides.ts:3 でページごとの string[] として API から渡っているが、MarpSlideViewer/index.tsx は現状これを描画していない。ここは「追加したい」という指摘を受けて描いた提案で、本文はリポジトリから読めないため代表値。", + "width": "fill_container", + "fill": "$lib:surface-variant", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "text", + "id": "RB6R7J", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スピーカーノート", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "Am7Ugw", + "name": "Body", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Marp のスライドを Qiita CLI からそのまま投稿できることを話す", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "jOcx3p", + "name": "Page 2", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "id": "qBAVPY", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide 2", + "width": 759, + "height": 427, + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "descendants": { + "ZZdKa": { + "content": "スライドの作り方" + }, + "D6HOm": { + "content": "--- で区切るだけ" + } + } + }, + { + "type": "frame", + "id": "TxS5v6", + "name": "Speaker Note", + "context": "speaker_note は src/lib/view-models/slides.ts:3 でページごとの string[] として API から渡っているが、MarpSlideViewer/index.tsx は現状これを描画していない。ここは「追加したい」という指摘を受けて描いた提案で、本文はリポジトリから読めないため代表値。", + "width": "fill_container", + "fill": "$lib:surface-variant", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "text", + "id": "71b54H", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スピーカーノート", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "cSkdm8", + "name": "Body", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "--- の区切りだけでページが増えることをデモする", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ziihD9", + "name": "Page 3", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "id": "J6vhIQ", + "type": "ref", + "ref": "N3tg9B", + "name": "Slide 3", + "width": 759, + "height": 427, + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "descendants": { + "ZZdKa": { + "content": "投稿する" + }, + "D6HOm": { + "content": "qiita publish で Qiita へ" + } + } + }, + { + "type": "frame", + "id": "pU90d9", + "name": "Speaker Note", + "context": "speaker_note は src/lib/view-models/slides.ts:3 でページごとの string[] として API から渡っているが、MarpSlideViewer/index.tsx は現状これを描画していない。ここは「追加したい」という指摘を受けて描いた提案で、本文はリポジトリから読めないため代表値。", + "width": "fill_container", + "fill": "$lib:surface-variant", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "text", + "id": "GAF2Qi", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スピーカーノート", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "P1okEA", + "name": "Body", + "fill": "$lib:high-emphasis-text", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "qiita publish の実演。投稿後の URL を見せる", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "h3hn1", + "x": 5622, + "y": 1180, + "name": "/slides/[id]?present=1 - start slideshow modal state(1920px)", + "width": 1920, + "height": 1080, + "fill": "$lib:scrim", + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "d6S8j", + "name": "Modal", + "width": 760, + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "iQfv7", + "name": "Container", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "padding": "$lib:getSpace(4)", + "children": [ + { + "type": "frame", + "id": "M0q9bT", + "name": "Header", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "An3pS", + "name": "Title", + "fill": "$lib:high-emphasis-text", + "content": "スライドショーを開始する", + "lineHeight": "$lib:text-subhead2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-subhead2", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "frame", + "id": "bU134", + "name": "Help Link", + "gap": "$lib:getSpace(1/4)", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "w1HlmT", + "width": 16, + "height": 16, + "icon": "help", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:blue-text" + }, + { + "type": "text", + "id": "bJexB", + "name": "Label", + "fill": "$lib:blue-text", + "content": "ヘルプ", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "h3C2A", + "name": "Body", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(2)", + "children": [ + { + "type": "frame", + "id": "O7UtQ", + "name": "Fieldset / Presentation Options", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "children": [ + { + "type": "text", + "id": "cSx8V", + "name": "Legend", + "fill": "$lib:high-emphasis-text", + "content": "スライドショーの表示オプション", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "frame", + "id": "x3vWB", + "name": "Checkbox Row", + "gap": "$lib:getSpace(1)", + "alignItems": "center", + "children": [ + { + "id": "IEkx6", + "type": "ref", + "ref": "lib:E9u4G", + "name": "Checkbox / Checked", + "descendants": { + "lib:HRbeQ": { + "geometry": "M7.775 13.55l7.15-7.15-1.575-1.55-5.575 5.575-2.775-2.775-1.55 1.55 4.325 4.35z m-5.5 4.85c-0.63333 0-1.17067-0.22067-1.612-0.662-0.442-0.442-0.663-0.97967-0.663-1.613l0-13.85c0-0.63333 0.221-1.171 0.663-1.613 0.44133-0.44133 0.97867-0.662 1.612-0.662l13.85 0c0.63333 0 1.171 0.22067 1.613 0.662 0.44133 0.442 0.662 0.97967 0.662 1.613l0 13.85c0 0.63333-0.22067 1.171-0.662 1.613-0.442 0.44133-0.97967 0.662-1.613 0.662l-13.85 0z m0-2.275l13.85 0 0-13.85-13.85 0 0 13.85z", + "fill": "$lib:blue-text-dim" + }, + "lib:gh1Nh": { + "content": "スライドショーを全画面に表示する" + } + } + } + ] + } + ] + }, + { + "type": "frame", + "id": "NaAwt", + "name": "Fieldset / Slideshow Display", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "children": [ + { + "type": "text", + "id": "voquT", + "name": "Legend", + "fill": "$lib:high-emphasis-text", + "content": "スライドショー", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "frame", + "id": "E3ComZ", + "name": "Radio Row / Current", + "gap": "$lib:getSpace(1)", + "alignItems": "center", + "children": [ + { + "id": "bpahL", + "type": "ref", + "ref": "lib:lKaRH", + "name": "Radio / Checked", + "descendants": { + "lib:HpumF": { + "geometry": "M10.2 15.2c1.38333 0 2.56267-0.48767 3.538-1.463 0.97467-0.97467 1.462-2.15367 1.462-3.537 0-1.38333-0.48733-2.56267-1.462-3.538-0.97533-0.97467-2.15467-1.462-3.538-1.462-1.38333 0-2.56233 0.48733-3.537 1.462-0.97533 0.97533-1.463 2.15467-1.463 3.538 0 1.38333 0.48767 2.56233 1.463 3.537 0.97467 0.97533 2.15367 1.463 3.537 1.463z m0 5.2c-1.41667 0-2.746-0.26667-3.988-0.8-1.24133-0.53333-2.32033-1.25833-3.237-2.175-0.91667-0.91667-1.64167-1.99567-2.175-3.237-0.53333-1.242-0.8-2.57133-0.8-3.988 0-1.41667 0.26667-2.746 0.8-3.988 0.53333-1.24133 1.25833-2.32033 2.175-3.237 0.91667-0.91667 1.99567-1.64167 3.237-2.175 1.242-0.53333 2.57133-0.8 3.988-0.8 1.41667 0 2.746 0.26667 3.988 0.8 1.24133 0.53333 2.32033 1.25833 3.237 2.175 0.91667 0.91667 1.64167 1.99567 2.175 3.237 0.53333 1.242 0.8 2.57133 0.8 3.988 0 1.41667-0.26667 2.746-0.8 3.988-0.53333 1.24133-1.25833 2.32033-2.175 3.237-0.91667 0.91667-1.99567 1.64167-3.237 2.175-1.242 0.53333-2.57133 0.8-3.988 0.8z m0-2.275c2.21667 0 4.09167-0.76667 5.625-2.3 1.53333-1.53333 2.3-3.40833 2.3-5.625 0-2.21667-0.76667-4.09167-2.3-5.625-1.53333-1.53333-3.40833-2.3-5.625-2.3-2.21667 0-4.09167 0.76667-5.625 2.3-1.53333 1.53333-2.3 3.40833-2.3 5.625 0 2.21667 0.76667 4.09167 2.3 5.625 1.53333 1.53333 3.40833 2.3 5.625 2.3z", + "fill": "$lib:blue-text-dim" + }, + "lib:k5IwD": { + "content": "DELL P2417H（現在）" + } + } + } + ] + }, + { + "type": "frame", + "id": "X5X516", + "name": "Radio Row / External", + "gap": "$lib:getSpace(1)", + "alignItems": "center", + "children": [ + { + "id": "i8Njd2", + "type": "ref", + "ref": "lib:lKaRH", + "name": "Radio / Default", + "descendants": { + "lib:k5IwD": { + "content": "内蔵Retinaディスプレイ" + } + } + } + ] + } + ] + }, + { + "type": "frame", + "id": "aGnYE", + "name": "Fieldset / Presenter View Display", + "width": "fill_container", + "layout": "vertical", + "gap": "$lib:getSpace(1)", + "children": [ + { + "type": "text", + "id": "JcWWy", + "name": "Legend", + "fill": "$lib:high-emphasis-text", + "content": "プレゼンタービュー", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "text", + "id": "EYYQh", + "name": "Note", + "fill": "$lib:medium-emphasis-text", + "content": "スライドショーを全画面表示する場合、プレゼンタービューは別のディスプレイが必要です。", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "tvYFH", + "name": "Radio Row / None", + "gap": "$lib:getSpace(1)", + "alignItems": "center", + "children": [ + { + "id": "VUDAn", + "type": "ref", + "ref": "lib:lKaRH", + "name": "Radio / Checked", + "descendants": { + "lib:HpumF": { + "geometry": "M10.2 15.2c1.38333 0 2.56267-0.48767 3.538-1.463 0.97467-0.97467 1.462-2.15367 1.462-3.537 0-1.38333-0.48733-2.56267-1.462-3.538-0.97533-0.97467-2.15467-1.462-3.538-1.462-1.38333 0-2.56233 0.48733-3.537 1.462-0.97533 0.97533-1.463 2.15467-1.463 3.538 0 1.38333 0.48767 2.56233 1.463 3.537 0.97467 0.97533 2.15367 1.463 3.537 1.463z m0 5.2c-1.41667 0-2.746-0.26667-3.988-0.8-1.24133-0.53333-2.32033-1.25833-3.237-2.175-0.91667-0.91667-1.64167-1.99567-2.175-3.237-0.53333-1.242-0.8-2.57133-0.8-3.988 0-1.41667 0.26667-2.746 0.8-3.988 0.53333-1.24133 1.25833-2.32033 2.175-3.237 0.91667-0.91667 1.99567-1.64167 3.237-2.175 1.242-0.53333 2.57133-0.8 3.988-0.8 1.41667 0 2.746 0.26667 3.988 0.8 1.24133 0.53333 2.32033 1.25833 3.237 2.175 0.91667 0.91667 1.64167 1.99567 2.175 3.237 0.53333 1.242 0.8 2.57133 0.8 3.988 0 1.41667-0.26667 2.746-0.8 3.988-0.53333 1.24133-1.25833 2.32033-2.175 3.237-0.91667 0.91667-1.99567 1.64167-3.237 2.175-1.242 0.53333-2.57133 0.8-3.988 0.8z m0-2.275c2.21667 0 4.09167-0.76667 5.625-2.3 1.53333-1.53333 2.3-3.40833 2.3-5.625 0-2.21667-0.76667-4.09167-2.3-5.625-1.53333-1.53333-3.40833-2.3-5.625-2.3-2.21667 0-4.09167 0.76667-5.625 2.3-1.53333 1.53333-2.3 3.40833-2.3 5.625 0 2.21667 0.76667 4.09167 2.3 5.625 1.53333 1.53333 3.40833 2.3 5.625 2.3z", + "fill": "$lib:blue-text-dim" + }, + "lib:k5IwD": { + "content": "表示しない" + } + } + } + ] + }, + { + "type": "frame", + "id": "Xf7tN", + "name": "Radio Row / Current (disabled)", + "gap": "$lib:getSpace(1)", + "alignItems": "center", + "children": [ + { + "id": "fnTlL", + "type": "ref", + "ref": "lib:lKaRH", + "name": "Radio / Disabled", + "descendants": { + "lib:HpumF": { + "fill": "$lib:disabled-text" + }, + "lib:k5IwD": { + "content": "DELL P2417H（現在）", + "fill": "$lib:disabled-text" + } + } + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "e9Xv7B", + "name": "Footer", + "width": "fill_container", + "gap": "$lib:getSpace(2)", + "justifyContent": "end", + "children": [ + { + "id": "MZBWe", + "type": "ref", + "ref": "lib:rRXOh", + "name": "Cancel Button", + "padding": [ + "$lib:getSpace(1/2)", + "$lib:getSpace(2)" + ], + "height": 34, + "descendants": { + "lib:N87bo": { + "content": "キャンセル" + } + } + }, + { + "id": "s5LTY", + "type": "ref", + "ref": "lib:aAXqR", + "name": "Start Button", + "height": 34, + "descendants": { + "lib:J2Bdc": { + "content": "スライドショーを開始" + } + } + } + ] + } + ] + } + ] + } + ] + } + ], + "imports": { + "lib": "../../shared-library.lib.pen" + }, + "fileToken": "be3519eb-0383-428c-a582-2c0f7135ba15" +} \ No newline at end of file diff --git a/design/shared-library.lib.pen b/design/shared-library.lib.pen new file mode 100644 index 0000000..25b824f --- /dev/null +++ b/design/shared-library.lib.pen @@ -0,0 +1,8629 @@ +{ + "version": "2.17", + "children": [ + { + "type": "frame", + "id": "ueDtR", + "x": 0, + "y": 0, + "name": "Button", + "fill": "$surface", + "cornerRadius": 12, + "layout": "vertical", + "gap": "$getSpace(2)", + "padding": "$getSpace(3)", + "children": [ + { + "type": "text", + "id": "jEQUP", + "name": "Title", + "fill": "$high-emphasis-text", + "content": "Button", + "fontFamily": "$font-sans", + "fontSize": "$text-body1", + "fontWeight": "$fontWeight-bold" + }, + { + "type": "frame", + "id": "omQtk", + "name": "Button", + "context": "qiita-cli の実装に共通の Button コンポーネントは無く、`