diff options
| -rw-r--r-- | src/components/ScheduleTable.astro | 37 | ||||
| -rw-r--r-- | src/styles/custom.css | 13 |
2 files changed, 25 insertions, 25 deletions
diff --git a/src/components/ScheduleTable.astro b/src/components/ScheduleTable.astro index 870cd77..7cbc751 100644 --- a/src/components/ScheduleTable.astro +++ b/src/components/ScheduleTable.astro @@ -61,8 +61,8 @@ const dateHtml = (html: string) => const KINDS: { kind: string; label: string }[] = [ { kind: 'x', label: 'Xでシェア' }, - { kind: 'instagram', label: 'Instagramでシェア' }, - { kind: 'facebook', label: 'Facebookでシェア' }, + { kind: 'line', label: 'LINEで送る' }, + { kind: 'copy', label: '文面をコピー' }, ]; function attachButtons() { @@ -126,35 +126,30 @@ const dateHtml = (html: string) => return; } - if (kind === 'facebook') { - // Facebookのsharerは文面を指定できない（ページのOGPが使われる） + if (kind === 'line') { + // LINEは文面とURLの両方を渡せる window.open( - `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`, + `https://social-plugins.line.me/lineit/share?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`, '_blank', 'noopener', ); return; } - // Instagramはテキストを渡せる共有URLがないため、端末の共有メニューを使う - const share = (navigator as Navigator & { share?: (data: ShareData) => Promise<void> }) - .share; - if (share) { - try { - await share.call(navigator, { text, url }); - } catch { - // キャンセルされた場合は何もしない - } - return; - } - + // コピー：Instagram・Facebookなど、文面を直接渡せないSNSにも貼れる try { await navigator.clipboard.writeText(`${text}\n${url}`); - window.alert( - 'Instagram はスマートフォンの共有メニューから投稿できます（このブラウザは共有メニューに対応していません）。共有する文面をコピーしました。', - ); + const original = button.title; + button.classList.add('is-done'); + button.title = 'コピーしました'; + button.setAttribute('aria-label', 'コピーしました'); + window.setTimeout(() => { + button.classList.remove('is-done'); + button.title = original; + button.setAttribute('aria-label', original); + }, 1500); } catch { - window.alert('Instagram はスマートフォンの共有メニューから投稿できます。'); + window.alert('このブラウザではコピーできませんでした。文面を選択してコピーしてください。'); } }); diff --git a/src/styles/custom.css b/src/styles/custom.css index 4fd4829..006d3b8 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -336,11 +336,16 @@ 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-instagram { - --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%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%275%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%274%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%2717.2%27%20cy%3D%276.8%27%20r%3D%271.2%27%2F%3E%3C%2Fsvg%3E"); +.schedule-share-btn.is-line { + --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%3Crect%20x%3D%272%27%20y%3D%273.5%27%20width%3D%2720%27%20height%3D%2713.5%27%20rx%3D%274%27%2F%3E%3Cpath%20d%3D%27M7.5%2017v4.2L13%2017z%27%2F%3E%3C%2Fsvg%3E"); } -.schedule-share-btn.is-facebook { - --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%27M22%2012a10%2010%200%201%200-11.6%209.9v-7H7.9V12h2.5V9.8c0-2.5%201.5-3.9%203.8-3.9%201.1%200%202.2.2%202.2.2v2.4h-1.2c-1.2%200-1.6.8-1.6%201.6V12h2.7l-.4%202.9h-2.3v7A10%2010%200%200%200%2022%2012Z%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%3Crect%20x%3D%279%27%20y%3D%279%27%20width%3D%2712%27%20height%3D%2712%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M6%2015H5a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1h10a1%201%200%200%201%201%201v1%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%2F%3E%3C%2Fsvg%3E"); +} +.schedule-share-btn.is-done { + color: var(--sl-color-accent); + border-color: var(--sl-color-accent); + opacity: 1; } /* ── 冒頭の英語・中国語・韓国語・ベトナム語の案内 ── */ |