From 0a0e4ee695b1d93084dc49d810297a3b50d8a5e0 Mon Sep 17 00:00:00 2001 From: Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com> Date: Sat, 7 Nov 2026 13:07:55 +0900 Subject: events: 終了バッジを日付の次の行に置き、共有ボタンを共有メニューに MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 日付セルの「終了」を block にして改行して表示し、日付列が広がらない ようにした。共有ボタンのアイコンを指定の share-2 に変え、押すと 端末の共有メニュー（navigator.share）を開くようにした。非対応の ブラウザでは従来どおり文面をコピーする。 --- src/components/ScheduleTable.astro | 18 +++++++++++++++--- src/styles/custom.css | 8 ++++---- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/components/ScheduleTable.astro b/src/components/ScheduleTable.astro index 2ce073b..1e23000 100644 --- a/src/components/ScheduleTable.astro +++ b/src/components/ScheduleTable.astro @@ -61,7 +61,7 @@ const dateHtml = (html: string) => const KINDS: { kind: string; label: string }[] = [ { kind: 'x', label: 'Xでシェア' }, - { kind: 'copy', label: '共有用の文面をコピー' }, + { kind: 'share', label: '共有する' }, ]; function attachButtons() { @@ -125,7 +125,19 @@ const dateHtml = (html: string) => return; } - // コピー：Instagram・Facebookなど、文面を直接渡せないSNSにも貼れる + // 共有：端末の共有メニュー（Instagram・メール・メモなど）を開く。 + // 非対応のブラウザでは、文面をコピーして貼り付けられるようにする。 + const share = (navigator as Navigator & { share?: (data: ShareData) => Promise }) + .share; + if (share) { + try { + await share.call(navigator, { text, url }); + } catch { + // キャンセルされた場合は何もしない + } + return; + } + try { await navigator.clipboard.writeText(`${text}\n${url}`); const original = button.title; @@ -138,7 +150,7 @@ const dateHtml = (html: string) => button.setAttribute('aria-label', original); }, 1500); } catch { - window.alert('このブラウザではコピーできませんでした。文面を選択してコピーしてください。'); + window.alert('このブラウザでは共有メニューもコピーも使えません。文面を選択してコピーしてください。'); } }); diff --git a/src/styles/custom.css b/src/styles/custom.css index c714428..e4b9344 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -338,8 +338,8 @@ body:has(.parks-controls) .sl-markdown-content p { .schedule-share-btn.is-x { --share-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M18.244%202.25h3.308l-7.227%208.26%208.502%2011.24H16.17l-5.214-6.817L4.99%2021.75H1.68l7.73-8.835L1.254%202.25H8.08l4.713%206.231%205.451-6.231Zm-1.161%2017.52h1.833L7.084%204.126H5.117l11.966%2015.644Z%27%2F%3E%3C%2Fsvg%3E"); } -.schedule-share-btn.is-copy { - --share-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%203.5v11%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20fill%3D%27none%27%2F%3E%3Cpath%20d%3D%27m8%207.5%204-4%204%204%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20fill%3D%27none%27%2F%3E%3Cpath%20d%3D%27M7.5%2010H5.8A1.8%201.8%200%200%200%204%2011.8v7.4A1.8%201.8%200%200%200%205.8%2021h12.4a1.8%201.8%200%200%200%201.8-1.8v-7.4a1.8%201.8%200%200%200-1.8-1.8H16.5%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E"); +.schedule-share-btn.is-share { + --share-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M16%207L12%203M12%203L8%207M12%203V16M20%2013V18C20%2019.1046%2019.1046%2020%2018%2020H6C4.89543%2020%204%2019.1046%204%2018L4%2013%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E"); } .schedule-share-btn.is-done { color: var(--sl-color-accent); @@ -2436,8 +2436,8 @@ td.sanpi-open .sanpi-title { background: var(--sl-color-gray-6); } .schedule-ended-badge { - display: inline-block; - margin-left: 0.35rem; + display: block; + margin: 0.15rem 0 0; padding: 0 0.35rem; border: 1px solid var(--sl-color-gray-5); border-radius: 999px; -- cgit v1.3.1