Shigetaka Shirouchi
Shigetaka Shirouchi
5月頃にルビを振る仕組みのところは実装できています。 グラフの注釈などのアップデートがあり development に追従しきれずに、開発が止まっている状態です。 最新まで更新して、多言語対応部分のタグを置き換えれば動作すると思いますが、描画のパフォーマンスとスタイルは再度チェックしたほうが良さそうです。 今の実装は、ページ描画時に Vue のコンポーネントでルビがついた VDOM を返しているので、VDOM の数に比例して計算量が増えます。 当時と比べてグラフ・データ量ともに増えているので、この状態でどれくらいの速度で返ってくるかは確認したいです。 スタイルについては、ルビがつくことで垂直方向の高さがでるので、ボタンや表などでテキストが（スマホ・PC ともに）はみ出ていないかを見ると良さそうです。
必須条件かどうかは僕には判断できないのですが、issue を書いたときには - これまでの実装は JavaScript 無効化時の動作を考慮していた #1443, #1969 - Issue 起票時点では Netlify でビルドしている development 環境でもテーブルのレイアウトは崩れていなかった - `情報は人に届けてこそ意味がある。UX（ユーザエクスペリエンス）を大切にする。` ref: [サイト構築にあたっての行動原則: CODE_OF_CONDUCT.md](https://github.com/tokyo-metropolitan-gov/covid19/blob/development/CODE_OF_CONDUCT.md#user-perspective) といったことを考えていました。 > vue/nuxt.jsを使っている時点でありえないかと…。 開発者側にそういった意見があることもわかります。 例えば、クライアントサイドでレンダリングしている Chart.js のグラフを JavaScript 無効化時に表示するなら僕も厳しいと思います。 今回の...
メンテナンス性を考慮して、同じような役割のグラフやコードを整理するのは賛成です。 役割とデータ型が共通していて、`props` や継承などの縦の関係でまとめられるところは、無理のない範囲で共通化できると良いと思います。 一方で、縦の関係で共通化しにくいところは、横の関係でコンポーネントを作っていくと良いかなと思っています。 例えば、`data-view-table` やグラフの横スクロール、前日比の計算ロジックのように、グラフをまたいで同じ処理をしている部分です。 このサイトは「モニタリング指標」のように一気にグラフが入れ替ることがあるので、コンポーネントを組み合わせればグラフを実装できるようにしておくこと（柔軟性）も重要な指標かと思います。 個人的には、横の関係でコンポーネント化を進めつつ、できるところは縦の関係でまとめていけると良いかなと思っています。 縦の関係でまとめるとグラフのパターンが整理されますし、横の関係が整理されると今後グラフのバリエーションが増えても対応しやすくなると思います。 もちろん、作業的にやりやすい場合やすでにパターンが見えているところは縦の関係から整理してもいいと思います。 横の関係で共通化できそうだと思っているところは、以下のようなところです。 - `GraphLegend` のテンプレートとスタイル部分 - `displayOption` の共通部分 - `displayOptionHeader` は それぞれのグラフの `displayOption` から自動生成できそう - `mounted` で `aria-labelledby` を付けているところ
ありがとうございます。 「当サイトについて」はすすめていただいて大丈夫です。（この後 issue を立てます） 「お問い合わせ先一覧」については、テーブル内にルビタグがつくとセルの高さが揃わない箇所があるので、そちらついて解決できればと思っています。  詳細は issue に記載しますので、なにかいい解決策があればご提案いただけると助かります！
development のマージありがとうございます。 自分が必要だと思う issue は起票いたしました。 あと残っているのがグラフの軸の対応です。 「都庁来庁者数の推移」のみ軸に漢字が含まれています。 こちらの対応方法を検討しているのですが、Chart.js で実装するのは難易度が高いような気がしています。 （凡例のように DOM 上に出せば他の部分と同じようにルビが振れますが、そもそも DOM 上に軸を出すのが大変そうです） デザインを変更できるなら、グラフ外に単位を出せれば実装難易度は低くなりますが、その場合は都側との調整等が必要になるかと思います。 
私の方で認識してる、今プルリクエストが出ているもの以外のタスク 1. `` によるルビ対応 個別のチケットにすると細かすぎると思うので、まとめて 1つの issue で対応すると良さそう https://github.com/tokyo-metropolitan-gov/covid19/blob/c8d003f19ccd3e670b439c6d2ef7bde9c4807b18/pages/parent.vue#L17-L30 https://github.com/tokyo-metropolitan-gov/covid19/blob/c8d003f19ccd3e670b439c6d2ef7bde9c4807b18/pages/about.vue#L201-L213 2. 正規表現の改善 #3133
@kebhr ありがとうございます！ --- 私の方でリリーススケジュールを把握していないので確定ではないのですが、 今後さらに `development` をマージした場合、追加対応が必要になる可能性があります。 その際は追加でコメントします。
> 漢字（熟語？）が連続するときはある程度の単位で区切ってルビを振るというガイドラインがあっても良いと思いました。皆さまいかがでしょうか？ いいと思います。 個人的にも長い単語の場合に、漢字とルビの対応関係が少しわかりにくいかなと思っていました。
このプロジェクトでは、ESLint の設定に [`prettier` のルールセットが入っている](https://github.com/tokyo-metropolitan-gov/covid19/blob/6f0bc74dee5eb59c93b840e86a2db620aa15d1bf/.eslintrc.js#L5-L25)ので、通常通り ESLint を実行すればそちらも対象になると思います。