ハッシュ値で任意の項目にリンク

[hibikikudo]

改善詳細 / Details of Improvement

• https://stopcovid19.metro.tokyo.lg.jp#positive_rate みたいな感じでハッシュ値で任意の項目にページ内リンク貼れたら嬉しくないですか？

スクリーンショット / Screenshot

期待する見せ方・挙動 / Expected behavior

• 例えば https://stopcovid19.metro.tokyo.lg.jp#positive_rate クリックで「モニタリング項目(4) 検査の陽性率」にジャンプ

動作環境・ブラウザ / Environment

• macOS / Windows / Linux / iOS / Android
• Chrome / Safari / Firefox / Edge / Internet Explorer

[kaizumaki]

@hibikikudo ご提案ありがとうございます！各カードにアンカーを振るということですね。たしかに、各カードにはパーマリンクはありますが、アンカーもあっていいかもですね。
できれば「その他 参考指標」のタブ内も対応したいのですが、だいぶ前にタブのパーマリンクが効かない問題があったので、個別のURLがないのですよね。#4897
もし、これが解決できるならアンカーの対応をしたいです。

[kaizumaki]

#6666 、 #6685 にてタブ毎のパーマリンクが実装されましたので、こちらの対応も可能かと思います。

[nichesuch]

少し調査してみました。

単純にidをつけて、mounted時にscrolltoしても動かない。
参照 https://dev83.com/nuxtjs-hash/

以下あたりが悪さをしていそう。
lazy-component
v-lazy

[kaizumaki]

@nichesuch フォローありがとうございます！たしかに、遅延読み込みに対応するには単にアンカー設定するだけではよくなさそうですね。遅延読み込みは残しておきたいので、こちらのissueについては保留でしょうか。

[nichesuch]

遅延読み込みを外せば動作するのは確認できました。
遅延読み込みを残しつつ対応できないか、もう少し調査してみます。

@kaizumaki 以下、対応パターンとしてはどれがよさそうですか？

1. 遅延読み込み完了後にアンカー位置に移動する。
2. ハッシュがあったら遅延読み込みをしない。
3. ハッシュがあったら対象のカードだけ表示する。
4. ハッシュがあったら対象のカードを一番上に表示する。

[nichesuch]

結構長いものもありますが、各カードのtitle-idをハッシュにすればよいでしょうか？

タイトル	コンポーネント	title-id
感染状況・医療提供体制（当日のサマリ）	InfectionMedicalCareProvisionStatus	infection-medical-care-provision-status
検査陽性者の状況	ConfirmedCasesDetails	details-of-confirmed-cases
モニタリング項目	MonitoringItemsOverview	monitoring-items-overview
感染状況・医療提供体制の分析	MonitoringComment	monitoring-comment
ワクチン接種数（累計）	Vaccination	vaccination
報告日別による陽性者数の推移	ConfirmedCasesNumber	number-of-confirmed-cases
検査実施件数	TestedNumber	number-of-tested
東京都発熱相談センターにおける相談件数	TokyoFeverConsultationCenterReportsNumber	number-of-reports-to-tokyo-fever-consultation-center
新型コロナコールセンター相談件数	TelephoneAdvisoryReportsNumber	number-of-reports-to-covid19-telephone-advisory-center

タイトル	コンポーネント	title-id
モニタリング項目	MonitoringItemsOverview	monitoring-items-overview
モニタリング項目(1) 新規陽性者数	MonitoringConfirmedCasesNumber	monitoring-number-of-confirmed-cases
モニタリング項目(2) #7119における発熱等相談件数	ConsultationAboutFeverNumber	number-of-reports-to-consultations-about-fever-in-7119
モニタリング項目(3) 新規陽性者における接触歴等不明者数/増加比	UntrackedRate	untracked-rate
モニタリング項目(4) 検査の陽性率/検査人数	PositiveRate	positive-rate
モニタリング項目(5) 救急医療の東京ルールの適用件数	TokyoRulesApplicationNumber	number-of-tokyo-rules-applied
モニタリング項目(6) 入院患者数	HospitalizedNumber	number-of-hospitalized
モニタリング項目(7) 重症患者数	SevereCase	positive-status-severe-case

タイトル	コンポーネント	title-id
陽性者の属性	ConfirmedCasesAttributes	attributes-of-confirmed-cases
陽性者数（区市町村別）	ConfirmedCasesByMunicipalities	number-of-confirmed-cases-by-municipalities
報告日別による陽性者数（65歳以上）の推移	PositiveNumberOver65	positive-number-over65
発症日別による陽性者数の推移	PositiveNumberByDevelopedDate	positive-number-by-developed-date
確定日別による陽性者数の推移	PositiveNumberByDiagnosedDate	positive-number-by-diagnosed-date
死亡日別による死亡者数の推移	DeathsByDeathDate	deaths-by-death-date
L452R変異株スクリーニングの実施状況 L452R陽性例構成割合/変異株PCR検査実施割合	Variant	variant
都営地下鉄の利用者数の推移	Metro	predicted-number-of-toei-subway-passengers
都庁来庁者数の推移	Agency	agency
受診相談窓口における相談件数	MonitoringConsultationDeskReportsNumber	monitoring-number-of-reports-to-covid19-consultation-desk

[kaizumaki]

@nichesuch 検証ありがとうございます！

1. 遅延読み込み完了後にアンカー位置に移動する。

が一番自然のような気がします。
ハッシュはtitle-idでよいかと！

[nichesuch]

@kaizumaki Draft状態でアップしました。
一度動きやソースを見てもらってこれでいいか、他にもっといい方法あるか確認してもらいたいです。