ぱすたけ日記

日記っぽいのを書きます。

【追記あり】「京都市新型コロナワクチン接種ポータルサイト」のよくあるお問合せをHTML化しました

追記 2021/05/31 22:45

京都市新型コロナワクチン接種ポータルサイト内の「よくあるお問合せ」が19時頃に更新されていて、PDFの項目が増えると共に元のExcelファイルも公開されていました！！素晴らしい！！！！！

追記 2021/05/21 09:15

今朝、京都市新型コロナワクチン接種ポータルサイト内の「よくあるお問合せ」のPDFファイルの中身が差し替わっていて、全てを画像化したPDFから文字列が埋め込まれたPDFに変更されていました。

ちゃんとファイルサイズなども小さくなっていてめでたいですね。

もとより京都市の公式PDFが改善されたら閉じるつもりだったので、以下で紹介している成果物も閉める予定です。

要約

  • 京都市新型コロナワクチン接種ポータルサイトというウェブサイトのよくある質問が全てを画像化したPDFだった
  • 史上最悪の出来事だと思ったので、全ページOCRして整えてHTML化したものをGithub Pagesに置きました

出来事について

京都市新型コロナワクチン接種ポータルサイトというウェブサイトがあります。京都市での新型コロナワクチン接種について分かるウェブサイトということになっているそうです。

このウェブサイトがvaccines-kyoto-city.jpでそもそもlg.jpじゃなくて.jpなのからしてまぁあれなのですが、最近は政府の諸々でもgo.jp使わないパターンとかもあるので、これについては諦めるとします。

本題はこのウェブサイトの中にある「よくあるお問合せについて」という部分です。ここのリンク先を押すとPDFに飛びます。「あ〜〜PDFか〜〜」と思うと思うんですが、さらにそのPDFはなんと全部表が画像なので、ページ内検索やコピペも何も出来ないのです。しかも項目が120個以上あります。

個人的にはそもそもPDFにするなよという感じですが、そこは100万歩譲るとしまして、こういう重要な情報が存在しうるPDFを出力する際に文字を埋め込まないというのは、ページ内検索をこよなく愛する僕としては許しがたい出来事ですし、また何よりも行政が配布している重要な文書にあるにも関わらずアクセシビリティに対する考慮も欠けているという最悪の事態です。

自らが住んでいる都市がこのような最悪の振る舞いをしているのを無視するわけにも行かないので、心優しい市民として「京都いつでもコール」の問い合わせ窓口から連絡しました。

京都市新型コロナワクチン接種ポータルサイト( https://vaccines-kyoto-city.jp/)からリンクされている「よくあるお問合せ」をまとめたもののリンク先のPDFについてです。
こちらのファイルはMicrosoftのPrint to PDFで作成されているようで、エクセルから変換したものだと推測していますが、現状のPDFでは表の中身が全て画像化されており、例えば「接種券」について知りたい場合に、目視で「接種券」について発見する必要があります。
PDFは適切に作成すれば、文字列が埋め込めるはずで、文字列が埋め込まれている場合、PDFビューワーのページ内検索などの機能でキーワードから発見出来ますし、また電話番号などのコピーも可能になります。
現在、このPDFには120項目を超えるQ&Aが載っていますが、自身の求めている情報にアクセスするために120項目を目で見る必要があるのは大変すぎると思います。京都市民は全員このPDFを目で120項目確認して適切な項目を発見できるような視力と読解力をお持ちとお考えなのでしょうか。
また、現状ではアクセシビリティ的な観点からも視覚に問題を抱えている場合、一切このPDFから情報を得ることが出来ないことを意味していると思います。
こちらは元のエクセルファイルが存在するならば、エクセルの名前を付けて保存やエクスポートなどからPDFを選択することで文字列が埋め込まれているPDFを作成できますので、是非差し替えを検討されればと思います。

是非とも担当の方にお伝えいただき検討をよろしくおねがいします。

と、お手紙を送ったのですが、京都市も今はコロナ禍で大変な中、せっせかワクチン接種の準備をしていて、エクセルを操作しPDFを生成し、アップロードする暇ももしかしたら無いのかもしれないと思ったので、PDFを全ページOCRで認識させて、それをウェブページにして勝手に公開することにしました。

PDFをAutomator.appで全部画像にして、それをGyazoにアップロードすると、Gyazoが裏でCloud Visionに投げてくれてOCRしてくれるので、その結果をえいやっと集めてきて、テキストファイルにし、それでもOCRでもそのまま読めるものではないので、PDFと見比べながら2時間弱ほどかけて整形して、 create-react-appでレンダリング作って (create-react-appで作ったものをNext.jsでHTMLをexportする形に変えました。詳しくは追記を参照してください)、Github PagesにGithub Actionsで置くというのを作りました。

誤字脱字があったらPull RequestやIssue、Twitterのメンションなどでお知らせください。

京都市の関係者の方へ

「京都市新型コロナワクチン接種ポータルサイト」のPDFが文字埋め込みになれば、このウェブページは閉じる予定です。その他ご連絡などありましたら、 [email protected]までご連絡ください。よろしくおねがいします。

追記・アップデートなど

「京都市新型コロナワクチン接種ポータルサイト」のよくあるお問合せをHTML化しました - ぱすたけ日記

素晴らしいけど、やっぱり句読点が半角カンマになってるの読みづらい。そこは置換しても良かったのでは。

2021/05/14 12:27

OCR結果が , になっているの若干気になっていたけど、 id:kamm さんからもブコメで指摘があったので全部置き換えました。

id:t_f_m さんによって電話番号がリンクになりました。ありがとうございます！！！！

その他にもOCRの修正などなどPull Request頂いています。ありがとうございます！

「京都市新型コロナワクチン接種ポータルサイト」のよくあるお問合せをHTML化しました - ぱすたけ日記

html化について分からなかったが、テキストエディタで地道につくったのだろうか？エクセルや下手なエディタで作ると余計な情報が着きすぎて表示に時間がかかるようになったりするけど。

2021/05/14 19:38

id:hazeyoshida 詳細はGithubにコードを置いているので見てもらえばと思うんですが、こういう形で質問と回答のデータを作って、それを変換して表示しています →仕組みをNext.jsで書き直したので、HTMLの生成はNext.jsに任せるようになりました。

権利について

ブコメなどでも話題に上がってますが、著作権などについてはサイトポリシーでは二次利用の禁止が書かれていますが、気にしない、むしろ早く京都市から連絡が来て不要になって閉じたいというスタンスです。著作権法第十三条より問題はないのではないかという見込みもしていますが、専門家ではないので、専門家の方居たらこっそり教えて下さい。

更新追随について

「京都市新型コロナワクチン接種ポータルサイト」のよくあるお問合せをHTML化しました - ぱすたけ日記

元の情報が更新されたときに反映されるのだろうか。

2021/05/14 21:39

id:yamada_k 元の情報の更新がされたときに気付けるように定期的に元のウェブページ https://vaccines-kyoto-city.jp/ 内のよくある問い合せ欄のリンクが更新されたかどうかをチェックするして、変更があった場合はSlackで僕に通知する仕組みを動かしています。

vaccines-kyoto-city-faq/check-updates.yml at master · pastak/vaccines-kyoto-city-faq · GitHub

これで更新自体は気付けるようになっています。また、更新されたときについてですが、よくある問い合せがHTMLになっていたり、PDFに文字列が埋め込まれている形式に改善されていた場合は今回作成したウェブページはよっぽどのことがない限りはクローズする予定です。更新があった時にPDFが今の形式のまま追加された場合は頑張って更新する予定ですが、力尽きていそうだったら是非Pull Requestなどで更新を手伝っていただければと思います。

ちなみに今日 https://vaccines-kyoto-city.jp/ のCSSがコンフリクト解消失敗しているという話もありました。

これを見て「へ〜」と思っていると、CSS内にFAQっぽいクラス（未使用）を見つけたので、もしかするとHTML側に来るのではという気配もしていますが、どうなるのでしょうか。楽しみですね。

HTMLの生成をNext.jsに変えました

クライアントサイドでパースして生成する必要ないよなと思っていたので、一念発起してさっさとNext.jsに置き換えました。

Next.jsのドキュメントにcreate-react-appからの移行のページもあったのでサクッと出来た。なにげに初めてちゃんとNext.js触ったので良い機会になりました。

構造化データも付与してあります。

Pasta-K 読者になる

関連記事
コメントを書く