diff --git a/.claude/skills/publish-qiita/SKILL.md b/.claude/skills/publish-qiita/SKILL.md index ff657d4d2d21..b742395ef1a8 100644 --- a/.claude/skills/publish-qiita/SKILL.md +++ b/.claude/skills/publish-qiita/SKILL.md @@ -60,11 +60,23 @@ description: Qiita の下書き URL と著者名を入力に、hexiita 変換 - `name` は書名・号の名前、`url` は**出版社の商品ページ**（Amazon ではなく、 オライリー・技術評論社・KADOKAWA など。Amazon しか無いならそれでよい） - - `work` は雑誌だけ。その号に載った寄稿のタイトル。書籍には書かない + - `work` は雑誌だけ。その号の**特集・章の名前**。一覧は「号＋`work`」で1行にまとまるので、 + 同じ特集に複数人が寄稿しているなら**同じ文字列**にする（章番号や章タイトルまで + 書き分けると号が2行に分かれる）。書籍には書かない + - `cover` は書籍・雑誌の両方に書ける。**表紙を一覧のパネルの左に出すので、 + 記事のサムネイルが表紙でないときだけ**（本棚や机の写真）画像のパスを書く。 + 省くと `thumbnail` が使われる。ただし**1つの記事で複数の号を紹介するときは + サムネイルを借りない**（どの号のものでもないため）ので、表紙を出したい号には + `cover` を書く。書かなければ空き枠になる + - 号の表紙が手元に無いときは、**出版社のページの書影を + `source/images/publications/<誌名>-<号>.jpg` に保存**して指す + （`sd-202601.jpg`。幅300pxのJPEGに縮める）。記事ごとのディレクトリに + 置かないのは、同じ号を複数の記事が指すため - `by` は**記事の著者と書いた人が違うときだけ**書く（イベント参加レポートなど）。 - 省くと記事の `author` が使われる。連名は `、` で区切る - - **1つの号に複数の寄稿があるなら、その記事が扱う分だけ書く。** 一覧は号ではなく - 寄稿1件を単位にしているので、同じ号が2行出てよい + 省くと記事の `author` が使われる。連名は `、` で区切る。 + **一覧には出ない**（1名しか出ないと共著が単著に見えるため）。記録として残す欄 + - **1つの号に複数の寄稿があるなら、その記事が扱う分だけ書く。** 同じ号を書いた記事が + 既にあっても気にしなくてよい。一覧は号ごとに1行へまとめ、寄稿をその行の中に積む - **参考として挙げた他者の本は書かない。** 一覧は「フューチャーの社員が書いたもの」で、 本文に出てくる書籍リンクをすべて拾う場所ではない - 並びは `url` から取る号の年月なので、記事の日付とずれていてよい diff --git a/CLAUDE.md b/CLAUDE.md index 4e382b47b934..34c984dab6b2 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -728,17 +728,20 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する 生まれない。以前は 2 / 3 / 5 / 6 / 10 / 14 / 25px が混ざっており、多くは 「円の直径の半分」のようにその場で計算した値で、隣の部品と揃える理由が無いまま 1px ずつ違っていた -- **サムネイルの寸法は4つしかない。新しい値を作らず、器の形で選ぶ**（#2790）。 +- **サムネイルの寸法は5つしかない。新しい値を作らず、器の形で選ぶ**（#2790）。 いずれも `object-fit: cover` で切り抜き、角丸は `radius-small`。サムネの実寸は 幅300px・高さがばらばら（比 1.0〜3.2）なので、寸法はこちら側の枠が決める | 器 | 寸法 | 使うところ | | --- | --- | --- | | 行に添える（`post-list-icon`） | 72×48 | 関連記事・被参照・ランキング・索引記事の表 | + | 表紙（`panel-thumb-cover`） | 60×80 | 出版・寄稿の書籍・技術誌のパネル | | 横並びのカード（`panel-thumb`） | 88×59 | サイドバーの枠・記事末のパネル・We're hiring | | パネルのグリッド | 200×135 | ホームの連載/特設パネル・`/series/` 一覧 | | 一覧カードの頭（`card-thumb`） | 幅100%・`aspect-ratio: 1200/630` | 記事一覧のカード（OGP と同じ比） | + - **表紙だけ縦長（3:4）。** ほかの4つは横長で、比 0.71〜0.79 の表紙を + `cover` で切ると書名が読めない。ここだけ器の向きが中身に従う - 比は 3:2 前後に揃っているが完全には一致しない（1.500 / 1.492 / 1.481）。 200×135 が標準サムネの寸法で、88×59 はその比を88px幅に丸めた値。 72×48 だけ 3:2 ちょうどなのは、48×32 では何の画像か読み取れず @@ -1959,15 +1962,58 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する 57件を実際に見ると、**自社の本と参考に挙げた他者の本が同じ形で混ざる** （「日本語書き下ろしで3版まで進んでいるのは Sphinxをはじめようと、本書のみ」・ 「後藤ゆきさん著の細かく紹介している本」）。どちらかは本文を読まないと分からない - - **まとめる単位は号ではなく寄稿1件。** 1つの号に複数の寄稿がある - （2019年3月号は機械学習の章とJavaScriptの章の2本で、書いた人も違う） + - **1枚のパネルは「号＋特集」。題の行が What、添えが報告の記事。** + 題の行は号の名前（リンク）と特集・章の名前（`panel-card` の `note`。 + リンクの外に置くので押せない。**色も段も号名と同じ**（`ink-strong` × `text-body`）で、 + 落とすのは太さだけ。**12px には落とさない**——あの段は添え・注記のもので、 + site.css の 12px を持つ53ルールはすべて `ink-mute` か `ink-faint` と対になっている）、 + 添えは記事へのリンクだけ。**同じ特集に複数の記事があれば添えに積む** + （2026年1月号は特集「アルゴリズムはどこに効く？」に2本）。 + 章まで書き分けると同じ号が2枚に分かれるので、`work` は特集の名前でそろえる + - **号だけを題にはしない。** 特集の違う寄稿を1枚に畳むと、下に並ぶ記事が + どちらの特集のものか読めなくなる（2019年3月号は機械学習の章とJavaScriptの章で、 + いまも2枚に分かれている） + - **特集名を添えに落とさない。** `panel-meta` の中では素の文字（特集名）と + リンク（記事）が**同じ段・同じ色**（12px・`ink-mute`。`.panel-meta a` が + metronic の青を打ち消して地の文と同じ色にしている）で隣り合い、区別が付かない。 + **記事のリンクに静止の下線を足す手は採らない**——同じカードの中で + 号名（hover で下線）と記事（常時下線）が違う振る舞いになる + - 題の行と記事の間は 12px（題の行の 4px ＋ `.publication-panels .panel-meta` の 8px）、 + 記事と記事の間は 4px。組の切れ目を刻み2つぶん広く取る + - 冊数は23、寄稿は24件なので、**本文が名乗るのは寄稿の件数**（`magazineCount`） - **並べるのは記事の日付ではなく「出たもの」の順。** 号の年月は URL の `/archive/YYYY/YYYYMM` から取る（2024年8月号の記事が12月に出ていた）。 巻で数える WEB+DB PRESS は年までしか取れないのでその年の最後に置く。 **取れる行と取れない行で基準を変えると比較が一貫せず、並びが崩れる** （一度踏んだ）。全部を YYYYMM の数値1つに寄せてから比べる - - **表紙は並べない。** 買い物ページではなく「誰が何を書いたか」の記録なので、 - 絵よりも書名・寄稿タイトル・執筆者が読めることを優先する + - **パネルに執筆者を出さない**（書籍・技術誌とも）。`by`（無ければ記事の `author`）は + 1名なので、共著・共訳・連名でもその1名だけが出て単著に見える。誰が書いたかは + リンク先の記事が名乗る。**`by` はフロントマターの記録として残す**（一覧は出さない） + - **書籍・技術誌ともパネルのグリッドで2列**（連載・HTTF と同じ `panel-card`）。 + **3列にしない**——添えが「執筆者 ／ 記事タイトル」で、3列だと列の文字幅が + 122〜212px になり添えが3〜4行に折り返す。文字の塊が表紙（80px）より高くなって + 帯が崩れる。2列なら題は1行、添えは1〜2行で、塊は 43〜82px に収まる（実測） + - **表紙を並べる**（#2912 の「表紙は並べない」を改めた）。「絵よりも書名・寄稿 + タイトル・執筆者が読めることを優先する」は変えていない——表紙はパネルの左の + 60×80 で、題と添えの可読性を奪わない + - **表紙は記事のサムネイルを借りる**（新しい画像を増やさない）。1冊だけを扱う + 記事はサムネイルにその表紙を使うのが慣例で、書籍8件と技術誌10件がこれに当たる。 + サムネイルが表紙でない記事だけ `cover:` が上書きする + - **複数の号をまとめて紹介する記事のサムネイルは借りない。** 寄稿まとめ記事の + サムネイルは表紙のコラージュで、どの号のものでもない。借りられない13件は + **出版社の書影を `source/images/publications/.jpg` に保存**して + `cover:` で指した（`sd-201710` のように誌名と号で名付け、幅300pxのJPEG＝ + 記事のサムネイルと同じ寸法に縮める） + - **記事ごとのディレクトリに置かない。** 1つの号の表紙を複数の記事が指す + （2019年3月号は「寄稿まとめ」と「Software Design 後記」の2記事）ので、 + どちらかの記事の下に置くと持ち主が決められない + - **`cover:` も記事サムネイルも無い号は空き枠（`surface-mute`）**になる。 + 枠と大きさは表紙があるときと同じに保つ（#2864）。いまは0件 + - **ページ本文でリンク先を説明しない。** 「書名・号の名前は出版社のページに…」の + 一文は落とした。書名・誌名は**その本・その号の名前そのもの**なので、 + リンクテキストから外部と読める（#2346 の「印を付けるのはリンクテキストから + 外部と読めないものだけ」に当たらない）。表紙と題は同じ行き先なので + サムネのリンクは読み上げから外している（#2845） - **記事の無い書籍は載らない。** 「記事に付随して書く」ことの帰結。 **ページ本文にはそう書かない**（#2895。読者に語るのは中身であって、 ページの作り方と収録の運用ではない） diff --git a/scripts/publications.js b/scripts/publications.js index ad908ebd4719..07f655775190 100644 --- a/scripts/publications.js +++ b/scripts/publications.js @@ -16,24 +16,56 @@ const issueKey = (url) => { return /^\d{6}$/.test(m[2]) ? Number(m[2]) : Number(m[1]) * 100 + 12; }; -const entry = (post, item) => ({ +/** + * 表紙は記事のサムネイルを既定にする。1冊だけを扱う記事はサムネイルにその表紙を + * 使うのが慣例で、そうでない記事だけ cover: が上書きする。 + * **複数の号をまとめて紹介する記事のサムネイルは借りない**（寄稿まとめ記事の + * サムネイルは表紙のコラージュで、どの号のものでもない）。表紙が分からない行は + * 空き枠になる + */ +const coverOf = (post, item, siblings) => + item.cover || (siblings.length === 1 ? post.thumbnail || '' : ''); + +const entry = (post, item, siblings) => ({ name: item.name, url: item.url, work: item.work || '', by: item.by || post.author || '', + cover: coverOf(post, item, siblings), post: { title: post.title, path: '/' + post.path }, key: issueKey(item.url), date: post.date.valueOf(), }); +/** + * 1行は「号＋章」で、同じ章に複数人が寄稿していれば書いた人をその行の中に積む。 + * 号だけを見出しにすると、章の違う寄稿に並ぶ「誰が」がどちらの章のものか読めない + */ +const groupByIssue = (magazines) => { + const issues = []; + magazines.forEach((m) => { + const last = issues[issues.length - 1]; + const item = { by: m.by, post: m.post }; + if (last && last.url === m.url && last.work === m.work) { + last.items.push(item); + // 表紙は同じ号のどれか1つが分かれば足りる + last.cover = last.cover || m.cover; + return; + } + issues.push({ name: m.name, url: m.url, work: m.work, cover: m.cover, items: [item] }); + }); + return issues; +}; + hexo.extend.helper.register('publications', function () { const books = []; const magazines = []; this.site.posts.forEach((post) => { - (post.books || []).forEach((b) => books.push(entry(post, b))); - (post.magazines || []).forEach((m) => magazines.push(entry(post, m))); + (post.books || []).forEach((b, _i, all) => books.push(entry(post, b, all))); + (post.magazines || []).forEach((m, _i, all) => magazines.push(entry(post, m, all))); }); books.sort((a, b) => b.date - a.date || (a.name < b.name ? -1 : 1)); magazines.sort((a, b) => b.key - a.key || b.date - a.date || (a.name < b.name ? -1 : 1)); - return { books, magazines }; + // 冊数ではなく寄稿の件数を本文が名乗るので、まとめる前の数も返す + return { books, magazines: groupByIssue(magazines), magazineCount: magazines.length }; }); diff --git a/scripts/thumbnail_image_size.js b/scripts/thumbnail_image_size.js index b2c6f49fbd73..82c6805d68cb 100644 --- a/scripts/thumbnail_image_size.js +++ b/scripts/thumbnail_image_size.js @@ -8,14 +8,21 @@ const { imageSize } = require('image-size'); const currentDir = process.cwd(); +const measure = (path) => { + const buffer = readFileSync(currentDir + '/source/' + path); + const { width, height } = imageSize(buffer); + return { width, height }; +}; + hexo.extend.helper.register('image_size_attribute', (path) => { if (!path) { return ''; // pathが未定義の場合や空の場合は空文字を返す } - const fullPath = currentDir + '/source/' + path; - const buffer = readFileSync(fullPath); - const dimensions = imageSize(buffer); + const dimensions = measure(path); return `width="${dimensions.width}" height="${dimensions.height}"`; }); + +// 属性の断片ではなく数値で受け取る呼び出し元用（panel-card の thumb など） +hexo.extend.helper.register('image_size', (path) => (path ? measure(path) : null)); diff --git a/source/_posts/2019/20191016-software-design.md b/source/_posts/2019/20191016-software-design.md index db17239be0b3..f6b0261175e7 100644 --- a/source/_posts/2019/20191016-software-design.md +++ b/source/_posts/2019/20191016-software-design.md @@ -14,14 +14,17 @@ lede: "2019年は幸運なことに、技術評論社のSoftware Designという magazines: - name: "Software Design 2019年1月号" url: https://gihyo.jp/magazine/SD/archive/2019/201901 + cover: /images/publications/sd-201901.jpg work: "自然言語処理・画像処理における線形代数の応用" by: 上野貴史、貞光九月 - name: "Software Design 2019年3月号" url: https://gihyo.jp/magazine/SD/archive/2019/201903 + cover: /images/publications/sd-201903.jpg work: "微分でつなぐ、機械学習とニューラルネットワーク" by: 上野貴史、貞光九月 - name: "Software Design 2019年9月号" url: https://gihyo.jp/magazine/SD/archive/2019/201909 + cover: /images/publications/sd-201909.jpg work: "数字認識APIを作って実感" by: 上野貴史、貞光九月 --- diff --git "a/source/_posts/2022/20220128a_\343\203\225\343\203\245\343\203\274\343\203\201\343\203\243\343\203\274\347\244\276\345\223\241\343\201\214\350\241\214\343\201\243\343\201\237IT\347\263\273\346\212\200\350\241\223\350\252\214\343\201\270\343\201\256\345\257\204\347\250\277\343\201\276\343\201\250\343\202\201(2017\357\275\2362022\345\271\264).md" "b/source/_posts/2022/20220128a_\343\203\225\343\203\245\343\203\274\343\203\201\343\203\243\343\203\274\347\244\276\345\223\241\343\201\214\350\241\214\343\201\243\343\201\237IT\347\263\273\346\212\200\350\241\223\350\252\214\343\201\270\343\201\256\345\257\204\347\250\277\343\201\276\343\201\250\343\202\201(2017\357\275\2362022\345\271\264).md" index c818c37ce4c1..84dc15e3cf42 100644 --- "a/source/_posts/2022/20220128a_\343\203\225\343\203\245\343\203\274\343\203\201\343\203\243\343\203\274\347\244\276\345\223\241\343\201\214\350\241\214\343\201\243\343\201\237IT\347\263\273\346\212\200\350\241\223\350\252\214\343\201\270\343\201\256\345\257\204\347\250\277\343\201\276\343\201\250\343\202\201(2017\357\275\2362022\345\271\264).md" +++ "b/source/_posts/2022/20220128a_\343\203\225\343\203\245\343\203\274\343\203\201\343\203\243\343\203\274\347\244\276\345\223\241\343\201\214\350\241\214\343\201\243\343\201\237IT\347\263\273\346\212\200\350\241\223\350\252\214\343\201\270\343\201\256\345\257\204\347\250\277\343\201\276\343\201\250\343\202\201(2017\357\275\2362022\345\271\264).md" @@ -15,42 +15,52 @@ lede: "フューチャーにおける、ここ4,5年でIT技術系の雑誌へ magazines: - name: "Software Design 2017年10月号" url: https://gihyo.jp/magazine/SD/archive/2017/201710 + cover: /images/publications/sd-201710.jpg work: "脆弱性スキャナVuls入門" by: 林優二郎、枇榔晃裕、牛田隆之、神戸康多 - name: "Software Design 2018年1月号" url: https://gihyo.jp/magazine/SD/archive/2018/201801 + cover: /images/publications/sd-201801.jpg work: "脆弱性管理サービスFutureVuls登場" by: 林優二郎、牛田隆之、枇榔晃裕 - name: "Software Design 2019年3月号" url: https://gihyo.jp/magazine/SD/archive/2019/201903 + cover: /images/publications/sd-201903.jpg work: "ES2015〜2018を踏まえた、今どきのJavaScriptの書き方" by: 澁川喜規 - name: "Software Design 2019年5月号" url: https://gihyo.jp/magazine/SD/archive/2019/201905 + cover: /images/publications/sd-201905.jpg work: "入門！ Go CLIツールとWebアプリを作って学ぶ 第3章" by: 澁川喜規 - name: "Software Design 2019年11月号" url: https://gihyo.jp/magazine/SD/archive/2019/201911 + cover: /images/publications/sd-201911.jpg work: "脆弱性スキャナVuls/Trivy/Dockle" by: 神戸康多 - name: "WEB+DB PRESS Vol.120" url: https://gihyo.jp/magazine/wdpress/archive/2021/vol120 + cover: /images/publications/wdpress-vol120.jpg work: "最新Vue.js 3 コアチームが解説！ 第2〜4章" by: 太田洋介 - name: "Software Design 2021年7月号" url: https://gihyo.jp/magazine/SD/archive/2021/202107 + cover: /images/publications/sd-202107.jpg work: "［特別企画］WSL 2本格入門" by: 澁川喜規 - name: "Software Design 2022年2月号" url: https://gihyo.jp/magazine/SD/archive/2022/202202 + cover: /images/publications/sd-202202.jpg work: "Cypressで作る“消耗しない”E2Eテスト環境【2】" by: 枇榔晃裕 - name: "Software Design 2022年3月号" url: https://gihyo.jp/magazine/SD/archive/2022/202203 + cover: /images/publications/sd-202203.jpg work: "Cypressで作る“消耗しない”E2Eテスト環境【3】" by: 澁川喜規 - name: "Software Design 2022年4月号" url: https://gihyo.jp/magazine/SD/archive/2022/202204 + cover: /images/publications/sd-202204.jpg work: "Cypressで作る“消耗しない”E2Eテスト環境【4】" by: 澁川喜規、枇榔晃裕 --- diff --git "a/source/_posts/2025/20251218a_Software_Design_2026\345\271\2641\346\234\210\345\217\267\343\201\256\343\202\242\343\203\252\343\202\264\343\203\252\343\202\272\343\203\240\347\211\271\351\233\206\343\201\253\345\257\204\347\250\277\343\201\227\343\201\237\343\201\212\350\251\261.md" "b/source/_posts/2025/20251218a_Software_Design_2026\345\271\2641\346\234\210\345\217\267\343\201\256\343\202\242\343\203\252\343\202\264\343\203\252\343\202\272\343\203\240\347\211\271\351\233\206\343\201\253\345\257\204\347\250\277\343\201\227\343\201\237\343\201\212\350\251\261.md" index 80191e11f39e..f97075e16441 100644 --- "a/source/_posts/2025/20251218a_Software_Design_2026\345\271\2641\346\234\210\345\217\267\343\201\256\343\202\242\343\203\252\343\202\264\343\203\252\343\202\272\343\203\240\347\211\271\351\233\206\343\201\253\345\257\204\347\250\277\343\201\227\343\201\237\343\201\212\350\251\261.md" +++ "b/source/_posts/2025/20251218a_Software_Design_2026\345\271\2641\346\234\210\345\217\267\343\201\256\343\202\242\343\203\252\343\202\264\343\203\252\343\202\272\343\203\240\347\211\271\351\233\206\343\201\253\345\257\204\347\250\277\343\201\227\343\201\237\343\201\212\350\251\261.md" @@ -15,7 +15,7 @@ lede: "真野さん、松本さんと一緒にSoftware Designの特集記事に magazines: - name: "Software Design 2026年1月号" url: https://gihyo.jp/magazine/SD/archive/2026/202601 - work: "アルゴリズム特集" + work: "アルゴリズムはどこに効く？" --- diff --git "a/source/_posts/2026/20260217a_\344\273\212\343\201\252\343\201\234\343\200\214\343\202\242\343\203\253\343\202\264\343\203\252\343\202\272\343\203\240\343\200\215\343\202\222\345\255\246\343\201\266\343\201\256\343\201\213\357\274\237_\342\200\224\342\200\224_Software_Design2026\345\271\2641\346\234\210\345\217\267\343\201\270\343\201\256\345\257\204\347\250\277\343\201\253\343\202\210\343\201\233\343\201\246.md" "b/source/_posts/2026/20260217a_\344\273\212\343\201\252\343\201\234\343\200\214\343\202\242\343\203\253\343\202\264\343\203\252\343\202\272\343\203\240\343\200\215\343\202\222\345\255\246\343\201\266\343\201\256\343\201\213\357\274\237_\342\200\224\342\200\224_Software_Design2026\345\271\2641\346\234\210\345\217\267\343\201\270\343\201\256\345\257\204\347\250\277\343\201\253\343\202\210\343\201\233\343\201\246.md" index a2c37f19b8c9..8b930007e6c9 100644 --- "a/source/_posts/2026/20260217a_\344\273\212\343\201\252\343\201\234\343\200\214\343\202\242\343\203\253\343\202\264\343\203\252\343\202\272\343\203\240\343\200\215\343\202\222\345\255\246\343\201\266\343\201\256\343\201\213\357\274\237_\342\200\224\342\200\224_Software_Design2026\345\271\2641\346\234\210\345\217\267\343\201\270\343\201\256\345\257\204\347\250\277\343\201\253\343\202\210\343\201\233\343\201\246.md" +++ "b/source/_posts/2026/20260217a_\344\273\212\343\201\252\343\201\234\343\200\214\343\202\242\343\203\253\343\202\264\343\203\252\343\202\272\343\203\240\343\200\215\343\202\222\345\255\246\343\201\266\343\201\256\343\201\213\357\274\237_\342\200\224\342\200\224_Software_Design2026\345\271\2641\346\234\210\345\217\267\343\201\270\343\201\256\345\257\204\347\250\277\343\201\253\343\202\210\343\201\233\343\201\246.md" @@ -11,6 +11,10 @@ categories: thumbnail: /images/2026/20260217a/thumbnail.jpg author: 真野隼記 lede: "同僚の澁川さん、松本さんと一緒に、Software Design 2026年1月号の第1特集「アルゴリズムはどこに効く？」にて、第3章「パフォーマンス問題の診断とアーキテクチャの再考」を寄稿しました。" +magazines: + - name: "Software Design 2026年1月号" + url: https://gihyo.jp/magazine/SD/archive/2026/202601 + work: "アルゴリズムはどこに効く？" --- diff --git a/source/images/publications/sd-201710.jpg b/source/images/publications/sd-201710.jpg new file mode 100644 index 000000000000..05c90b43ae8e Binary files /dev/null and b/source/images/publications/sd-201710.jpg differ diff --git a/source/images/publications/sd-201801.jpg b/source/images/publications/sd-201801.jpg new file mode 100644 index 000000000000..19c6af4627eb Binary files /dev/null and b/source/images/publications/sd-201801.jpg differ diff --git a/source/images/publications/sd-201901.jpg b/source/images/publications/sd-201901.jpg new file mode 100644 index 000000000000..d6a908bcdbb8 Binary files /dev/null and b/source/images/publications/sd-201901.jpg differ diff --git a/source/images/publications/sd-201903.jpg b/source/images/publications/sd-201903.jpg new file mode 100644 index 000000000000..0eb69c682539 Binary files /dev/null and b/source/images/publications/sd-201903.jpg differ diff --git a/source/images/publications/sd-201905.jpg b/source/images/publications/sd-201905.jpg new file mode 100644 index 000000000000..38241ce964fb Binary files /dev/null and b/source/images/publications/sd-201905.jpg differ diff --git a/source/images/publications/sd-201909.jpg b/source/images/publications/sd-201909.jpg new file mode 100644 index 000000000000..54bedbfdea2b Binary files /dev/null and b/source/images/publications/sd-201909.jpg differ diff --git a/source/images/publications/sd-201911.jpg b/source/images/publications/sd-201911.jpg new file mode 100644 index 000000000000..cc45ee4c6c59 Binary files /dev/null and b/source/images/publications/sd-201911.jpg differ diff --git a/source/images/publications/sd-202107.jpg b/source/images/publications/sd-202107.jpg new file mode 100644 index 000000000000..56ed597b99cd Binary files /dev/null and b/source/images/publications/sd-202107.jpg differ diff --git a/source/images/publications/sd-202202.jpg b/source/images/publications/sd-202202.jpg new file mode 100644 index 000000000000..c281e362ecfe Binary files /dev/null and b/source/images/publications/sd-202202.jpg differ diff --git a/source/images/publications/sd-202203.jpg b/source/images/publications/sd-202203.jpg new file mode 100644 index 000000000000..46993f827299 Binary files /dev/null and b/source/images/publications/sd-202203.jpg differ diff --git a/source/images/publications/sd-202204.jpg b/source/images/publications/sd-202204.jpg new file mode 100644 index 000000000000..bf04eb1199a2 Binary files /dev/null and b/source/images/publications/sd-202204.jpg differ diff --git a/source/images/publications/wdpress-vol120.jpg b/source/images/publications/wdpress-vol120.jpg new file mode 100644 index 000000000000..36350bd9a34b Binary files /dev/null and b/source/images/publications/wdpress-vol120.jpg differ diff --git a/source/specials/publications/index.md b/source/specials/publications/index.md index 3923ac1036e6..1dd8469da3a3 100644 --- a/source/specials/publications/index.md +++ b/source/specials/publications/index.md @@ -1,5 +1,5 @@ --- title: 出版・寄稿 -description: "フューチャーの社員が書いた書籍と、技術誌への寄稿の記録です。書名・号の名前は出版社のページに、それぞれの行は書いた本人によるブログの記事にリンクしています。" +description: "フューチャーの社員が書いた書籍と、技術誌への寄稿の記録です。" layout: publications --- diff --git a/themes/future/css-src/theme-styles.styl b/themes/future/css-src/theme-styles.styl index 616b0dc6c2f2..f38ef0fd4c70 100644 --- a/themes/future/css-src/theme-styles.styl +++ b/themes/future/css-src/theme-styles.styl @@ -2308,6 +2308,24 @@ body { font-size: text-body; font-weight: bold; } +/* 題と同じ行に続ける添え（出版・寄稿の特集名）。題をインラインにして1つの塊として + 流し、下マージンは器が持つ。リンクの外なので押せない */ +.panel-title-line { + margin-bottom: 4px; +} +.panel-title-line .panel-title { + display: inline; + margin-bottom: 0; +} +/* 色も段も題と同じ（ink-strong × text-body）。同じ「何に書いたか」を名乗る続きなので、 + 落とすのは太さだけ。**12px には落とさない**——あの段は添え・注記のもので、 + 色は ink-mute と対になっている。 + 同じ大きさの文字が続くので、間は全角空白ぶん（15.6px）に近い刻みを取る */ +.panel-title-note { + margin-left: (space-step * 3); + color: var(--ink-strong); + font-size: text-body; +} /* 反応を返すのはカードの規則（記事へ行くリンクの hover）で、ここでは足さない (#2686)。 以前は下線も出していて、1回のカーソル移動で2つの反応が起きていた。 ルールを消すのではなく打ち消しで残すのは、消すと metronic の @@ -5685,6 +5703,16 @@ p.more-link { background: var(--surface-mute); border-radius: radius-small; } +/* 表紙の器（出版・寄稿の書籍と技術誌）。ほかの4つはどれも横長で、縦長の表紙 + （比 0.71〜0.79）を cover で切ると書名が読めないので、ここだけ 3:4 を持つ */ +.panel-thumb-cover { + flex-basis: 60px; +} +.panel-thumb-cover img, +.panel-thumb-cover.panel-thumb-empty { + width: 60px; + height: 80px; +} /* カテゴリページの見出し行（#2294）。RSS購読アイコンを見出しの右端に置く */ .list-page-header { @@ -6400,24 +6428,18 @@ sg-ratios(sg-dark-award, dark-surface-base) margin-top: 0; } -/* 出版・寄稿の一覧 (#2912)。表紙は並べない。買い物ページではなく - 「誰が何を書いたか」の記録なので、書名と執筆者が読めることを優先する。 - 1件は「書名」＋「寄稿タイトル ／ 執筆者 ／ 記事」の2行 */ -.publication-list { - margin-bottom: (space-step * 6); +/* 出版・寄稿の一覧 (#2912)。パネルの添えは報告の記事だけで、同じ特集に複数の + 記事があれば積む。特集名は題の行が持つ（.panel-title-note） */ +.publication-credit { + display: block; } -.publication-item { - border-top: 1px solid var(--rule-weak); - padding: (space-step * 3) 0; +/* 題（書名・号名）と報告の記事の間は 12px。題の行が持つ 4px に刻み2つ足して、 + 記事どうしの 4px の3倍に取る */ +.publication-panels .panel-meta { + margin-top: (space-step * 2); } -.publication-name { - margin: 0; - font-size: text-body; -} -.publication-meta { - margin: (space-step) 0 0; - color: var(--ink-mute); - font-size: text-meta; +.publication-credit + .publication-credit { + margin-top: space-step; } /* 文字サイズの7段。行間・間隔と同じく、値は _variables.styl のトークンから出す。 diff --git a/themes/future/layout/_partial/panel-card.ejs b/themes/future/layout/_partial/panel-card.ejs index 71d26a844cff..8e8ca97bcf7d 100644 --- a/themes/future/layout/_partial/panel-card.ejs +++ b/themes/future/layout/_partial/panel-card.ejs @@ -10,7 +10,9 @@ 引数: url 行き先（必須） title 題（必須） - thumb {src, width, height, contain} か null。null なら空き枠を出す + note 題と同じ行に続ける添え（省略可）。リンクの外に置くので押せない + thumb {src, width, height, contain, variant} か null。null なら空き枠を出す + variant は器の形を替える（'cover' で縦長の表紙 60×80） label {icon, text} か null。種別の名札 (#2892) meta 題の下の添え。**HTML を受け取る**（HTTF はリンクを含む） more {url, text} か null。カードごとの全件導線 @@ -30,23 +32,33 @@ const panelLabel = typeof label === 'undefined' ? null : label; const panelMeta = typeof meta === 'undefined' ? null : meta; const panelMore = typeof more === 'undefined' ? null : more; + const panelNote = typeof note === 'undefined' ? null : note; const panelBlank = (typeof external !== 'undefined' && external) ? ' target="_blank" rel="noopener"' : ''; + const thumbShape = (panelThumb && panelThumb.contain ? ' panel-thumb-contain' : '') + + (panelThumb && panelThumb.variant ? ' panel-thumb-' + panelThumb.variant : ''); + %><%# 器の形（variant）は絵が無いときの空き枠にも要るので、src の有無だけで枝を分ける %><% + const hasThumb = panelThumb && panelThumb.src; %>
- <% if (panelThumb) { %> - <% } else { %> <%# サムネの無いものは同じ大きさの空き枠で行頭を揃える（post_list.js と同じ流儀） %> - + <% } %>
<%# 名札はリンクの外に置く。種別はカードの属性であって導線ではない (#2892) %> <% if (panelLabel) { %> <%- partial('svg-icon', {icon: panelLabel.icon}) %><%= panelLabel.text %> <% } %> + <%# note があるときは題と同じ行に流すので、題をインラインにする器で包む %> + <% if (panelNote) { %> +
><%= title %><%= panelNote %>
+ <% } else { %> ><%= title %> + <% } %> <% if (panelMeta) { %>
<%- panelMeta %>
<% } %> diff --git a/themes/future/layout/publications.ejs b/themes/future/layout/publications.ejs index 667d74956de0..f9cdaed6df6d 100644 --- a/themes/future/layout/publications.ejs +++ b/themes/future/layout/publications.ejs @@ -1,6 +1,6 @@ <%# 出版・寄稿の一覧 (#2912)。記事のフロントマターの books / magazines から - scripts/publications.js が集める。表紙は並べない——買い物ページではなく - 「誰が何を書いたか」の記録なので、書名・寄稿タイトル・執筆者が読めることを優先する。 + scripts/publications.js が集める。書影を添えるのは書籍の節だけ——技術誌は + 23件のうち13件が号ごとの表紙を持たない（2本のまとめ記事に由来する）。 行き先は出版社のページで、リンク1本ずつに印を付けずページの本文で一度名乗る (#2729) %> <% const pub = publications(); %>
@@ -13,34 +13,57 @@

出版・寄稿

-

フューチャーの社員が書いた書籍<%= pub.books.length %>点と、技術誌への寄稿<%= pub.magazines.length %>件です。書名・号の名前は出版社のページに、それぞれの行は書いた本人によるブログの記事にリンクしています。

+

フューチャーの社員が書いた書籍<%= pub.books.length %>点と、技術誌への寄稿<%= pub.magazineCount %>件です。

<%- partial('_partial/section-heading', {id: 'books', text: '書籍'}) %> -
    + <%# 書籍はパネルのグリッド（連載・HTTF と同じ部品）で2列。3列にすると添えの + 「執筆者 ／ 記事タイトル」が幅122〜212pxで3〜4行に折り返し、文字の塊が + 書影（80px）より高くなる。2列なら題は1行、添えは1〜2行に収まる %> +
    <% pub.books.forEach(function(b){ %> -
  • -

    <%= b.name %>

    -

    <%= b.by %> ／ <%= b.post.title %>

    -
    • +
    + <%- partial('_partial/panel-card', { + url: b.url, + title: b.name, + thumb: Object.assign({src: b.cover, variant: 'cover'}, image_size(b.cover)), + // 著者名は出さない。共著・共訳でも1名しか出ないので単著に見える + meta: '' + + escape_html(b.post.title) + '', + external: true, + }) %> +
    <% }) %> -
+
<%- partial('_partial/section-heading', {id: 'magazines', text: '技術誌への寄稿'}) %> - <%# まとめる単位は号ではなく寄稿1件。1つの号に複数の寄稿があり、書いた人も違う %> -
    + <%# 書籍と同じパネルのグリッド。題が「何に書いたか」（号＋特集名）、 + 添えが報告の記事。同じ特集に複数の記事があればその行を積む %> +
    <% pub.magazines.forEach(function(m){ %> -
  • -

    <%= m.name %>

    -

    <% if (m.work) { %><%= m.work %> ／ <% } %><%= m.by %> ／ <%= m.post.title %>

    -
    • +
    + <%- partial('_partial/panel-card', { + url: m.url, + title: m.name, + thumb: Object.assign({src: m.cover, variant: 'cover'}, m.cover ? image_size(m.cover) : {}), + // 特集名は題と同じ行に置く。添えに落とすと、素の文字と記事のリンクが + // 同じ段・同じ色で隣り合って区別が付かない + note: m.work, + // 執筆者は出さない。書籍と同じで、連名でも1名しか出ないので単著に見える + meta: m.items.map(function(w){ + return '' + + escape_html(w.post.title) + ''; + }).join(''), + external: true, + }) %> +
    <% }) %> -
+
<%- partial('_partial/section-heading', {id: 'relatedtags', text: '関連タグ'}) %>
<%- partial('_partial/tag-chips', {items: [ {name: '出版', path: '/tags/出版/'}, - {name: '外部寄稿', path: '/tags/外部寄稿/'}, + {name: 'SoftwareDesign', path: '/tags/SoftwareDesign/'}, ]}) %>