Tokyo-Metro-Gov
[ruby] やさしい日本語 のルビタグ対応
概要
「やさしい日本語」のルビタグ対応を行います。 トップページで例にすると、
| 現状から | こうしたい |
|---|---|
 |
 |
進め方
僕の方で対象ページごとに issue を立てますので、ページごとにルビタグ対応をすすめていきたいと思っています。 ページによっては検討事項がありますので、issue で方針が決まってから実装をお願いできればと思います。
今回のプロジェクトのベースブランチは dev-ja-hira-ruby です。
プルリクエストを作成する場合はこちらに向けて作成してください。
動作確認用の Netlify URL: https://ja-hira-covid19-tokyo.netlify.com/
対象ページ・箇所
| ページ名 | url |
|---|---|
| 都内の最新感染動向 （#2764 で対応） | /ja-basic |
| 都内の最新感染動向のグラフ（後述） | /ja-basic |
| 新型コロナウイルス感染症が心配なときに（PC） | /ja-basic/flow |
| 新型コロナウイルス感染症が心配なときに（SP） | /ja-basic/flow |
| お子様をお持ちの皆様へ | /ja-basic/parent |
| 企業の皆様・はたらく皆様へ | /ja-basic/worker |
| 当サイトについて | /ja-basic/about |
| お問い合わせ先一覧 | /ja-basic/contacts |
ルビタグ対応方法
ふりがな部分を <ruby> タグでマークアップすることで対応します。
例えば「検査陽性者の状況」は「やさしい日本語」で表示するとこのようなマークアップになっています。
<h3>
あたらしいコロナウイルスの 病気（びょうき）になった 人（ひと）
</h3>
このマークアップをこちらのように修正します。
<h3>
<span>
あたらしいコロナウイルスの
<ruby>
病気
<rp>（</rp>
<rt>びょうき</rt>
<rp>）</rp>
</ruby>
になった
<ruby>
人
<rp>（</rp>
<rt>ひと</rt>
<rp>）</rp>
</ruby>
</span>
</h3>
今回は「やさしい日本語」の場合だけ上記のようなルビタグがついたマークアップを生成する t-i18n コンポーネントを用意しました。
こちらのコンポーネントを使って、多言語対応している箇所を以下の方法で修正していただきたいです。
t-i18n コンポーネントの使い方
多言語対応してるコードを t-i18n コンポーネントのスロットに渡してください。
-
$tメソッドで埋め込んでいる文字列 - Flow ページなどで利用している
i18nコンポーネント
t-i18n コンポーネントは <span> タグで囲まれたノードを返すので、もともと <span> で囲われているものは <t-i18n> に置き換えてください。
# before
<span>{{ $t('検査陽性者の状況') }}</span>
# after
+ <t-i18n>{{ $t('検査陽性者の状況' }}</t-i18n>
<div> や <strong> など <span> 以外のタグで囲われていた場合は、そのタグの中に t-i18n コンポーネントを配置してください。
# before
<div>{{ $t('検査陽性者の状況') }}</div>
# after
<div>
+ <t-i18n>{{ $t('検査陽性者の状況') }}</t-i18n>
</div>
Flow ページなどで利用している i18n コンポーネント
の場合は、それをまるごと t-i18n のスロットに渡してください。
# before
<i18n
:class="$style.Catch"
tag="p"
path="新型コロナ外来 {advice} と判断された場合"
>
<template v-slot:advice>
<span :class="$style.Emphasis">
{{ $t('受診が必要') }}
</span>
</template>
</i18n>
# after
+ <t-i18n>
<i18n
:class="$style.Catch"
tag="p"
path="新型コロナ外来 {advice} と判断された場合"
>
<template v-slot:advice>
<span :class="$style.Emphasis">
{{ $t('受診が必要') }}
</span>
</template>
</i18n>
+ </t-i18n>
やさしい日本語の記法
漢字にルビを振る際の記法をまとめます。 こちらの記法から外れてもエラーにはなりませんが、そのままの文字列で表示されます。
- 基本形:
漢字 + 全角丸括弧 + ひらがな + 全角丸括弧
東京都（とうきょうと）
- 漢字・ふりがなともに間に全角中点を入れることができます。
土・日・祝日（ど・にち・しゅくじつ）
- ふりがなには全角・半角スペースを入れることができます。
都市整備局（とし せいび きょく）
- NG: 全角丸括弧の前にスペースや改行コードを入れないでください
# 半角スペース
東京都 （とうきょうと）
# 改行コード
東京都\n（とうきょうと）
その他の対応項目
「都内の最新感染動向」のグラフについては、凡例やツールチップのルビタグ対応が必要です。 凡例については対応方針が決まっているので、それぞれ issue を作って @shgtkshruch が対応します。
おつかれさまです。 作業環境など準備してるので、簡単そうなところから手を上げようと思っています。 「当サイトについて」「お問い合わせ先一覧」あたりは特段課題無くできそうですかね。
ありがとうございます。
「当サイトについて」はすすめていただいて大丈夫です。（この後 issue を立てます） 「お問い合わせ先一覧」については、テーブル内にルビタグがつくとセルの高さが揃わない箇所があるので、そちらついて解決できればと思っています。
詳細は issue に記載しますので、なにかいい解決策があればご提案いただけると助かります！
@shgtkshruch @shunito @kebhr 皆さまありがとうございます。
作業中に申し訳ないのですが、 development での変更が一部 dev-ja-hira-ruby に反映されていなかったので、今から取り込みます。その影響でコンフリクトや追加修正が必要になる場合があります。お手数おかけいたしますがよろしくお願いいたします
@shgtkshruch @shunito @kebhr 上記について、 #3136 にてマージ完了しました。不具合など発生していないがご確認よろしくお願いいたします
#3266 にて現行の development を取り入れました。
Revert必要でしたらこちらでご連絡ください
新規対応が必要な部分があった場合はissueの起票をお願いいたします
development のマージありがとうございます。 自分が必要だと思う issue は起票いたしました。
あと残っているのがグラフの軸の対応です。 「都庁来庁者数の推移」のみ軸に漢字が含まれています。
こちらの対応方法を検討しているのですが、Chart.js で実装するのは難易度が高いような気がしています。 （凡例のように DOM 上に出せば他の部分と同じようにルビが振れますが、そもそも DOM 上に軸を出すのが大変そうです） デザインを変更できるなら、グラフ外に単位を出せれば実装難易度は低くなりますが、その場合は都側との調整等が必要になるかと思います。
@shgtkshruch 「都庁来庁者数の推移」のy軸については
- y軸の目盛りから単位を抜く
- 注釈に「単位：人」と記載する
という方向でお願いします！
#3461 にて development を取り込みました
#3348 でflowページが全面的に変更になりました。混乱を避けるため、 pages/flow.vue 内のテンプレートは一部を除き dev-ja-hira-ruby 側の変更を破棄し development 側の変更を反映させました。
その他、いくつか新しい要素が追加されています
/pages/flow.vue~~とSP版のFlowコンポーネント~~のruby対応やります。
Edited: /components/flow以下は現在使用されていないようです。/pages/flow.vueのみ対応します。https://github.com/tokyo-metropolitan-gov/covid19/issues/3116#issuecomment-615591992
@kebhr 詳しく確認しておりませんが、おそらく今回のflowページ改修でPCとスマホ版でソースコードが統一となり、それに伴って components/flow/ 以下のコンポーネントも使用していないようです！
Edited: なのでflowページについては /pages/flow.vue だけ対応すれば大丈夫なはずです
@MaySoMusician
ちょうど /pages/flow.vue の中身の変化に驚いていたところです！
/pages/flow.vueのみ対応します。
私の方で認識してる、今プルリクエストが出ているもの以外のタスク
-
<TI18n>によるルビ対応 個別のチケットにすると細かすぎると思うので、まとめて 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
- 正規表現の改善 #3133
@kebhr ありがとうございます！
私の方でリリーススケジュールを把握していないので確定ではないのですが、
今後さらに development をマージした場合、追加対応が必要になる可能性があります。
その際は追加でコメントします。
#3588 にて development を取り込みました！
今回取り込んだ分がおそらく現時点での最終稿だと思われます。
現在openとなっているPRで追加対応が必要そうなものは個別にコメントいたしました。
「やさしい日本語の記法」ガイドラインについてひとつ提案なのですが、たとえば
「中国湖南省長沙市（ちょうごくこなんしょうちょうさし）」となっていると、横幅が狭いときに下図のようにルビと本文でそれぞれ改行されてしまいます。
「中国（ちゅうごく）湖南省（こなんしょう）長沙市（ちょうさし）」とすると、下図のようになります。見た目の問題はありますが、どのルビがどの文字に対応しているかはこちらの方がわかりやすくなると思います。
なので漢字（熟語？）が連続するときはある程度の単位で区切ってルビを振るというガイドラインがあっても良いと思いました。皆さまいかがでしょうか？
Edited: 問い合わせ一覧の「戦略政策情報推進本部（せんりゃく せいさく じょうほう すいしん ほんぶ）」でも同様の事態が起きています
漢字（熟語？）が連続するときはある程度の単位で区切ってルビを振るというガイドラインがあっても良いと思いました。皆さまいかがでしょうか？
いいと思います。 個人的にも長い単語の場合に、漢字とルビの対応関係が少しわかりにくいかなと思っていました。
#3944 にて最新の development を取り込みました
@shgtkshruch t-i18n コンポーネントで確認していただきたいことがあります。詳細は #3947