綴る: テーマ機能の実装に関して

既存の実装に関して

これまでのエディタでは背景を rgb(255 255 255 / 1)で塗りつぶしたキャンバスにユーザが書き込み、保存時に

• 記事表示用画像（オリジナル）
  • 閲覧者が記事を読む際に読み込まれる。投稿後の再編集の際にはエディタにロードされる。
  • リンクや画像などは含まれず、閲覧画面/編集画面上で組み立てられる。
    • 写真の位置などは後から調整したいため
• OCR用画像
  • OCR処理を実施するための画像。記事表示用画像とは異なり、閲覧画面で表示される画像なども1枚に埋め込んだ画像
    • OCR時には最終的にユーザが見るものと同じものを対象とした方がいいであろう、という判断
  • canvasで作ったデータをpngで出力するとアルファを扱えるが、透明部分が rgb(0 0 0 / 0)となる。OCR の過程でアルファが取り除かれた際に rgb(0 0 0)つまり真っ黒になるため、黒い線が読み取れなくなる問題があった。既存実装では背景を白で塗りつぶすことでこの問題を回避している。
• サムネイル画像
  • 縮小画像
  • OCR画像同様、最終的にユーザが見るものと同じ物が良いので画像などは埋め込まれている。

の三種類を生成してアップロードしていました。

テーマの実装に向けて変更した箇所

• 表示用画像（オリジナル）
  • 背景を透明に変更
  • テーマ画像はcanvas要素の background-image として CSS で表示
• OCR用画像
  • 新たなcanvasをrgb(255 255 255 / 1)で塗りつぶして、その上にオリジナルの画像を描画してから画像などを埋め込む形に変更
  • テーマ画像も埋め込んでテストしたところ、罫線などの装飾がOCR結果に悪影響を及ぼすケースがあったため
• サムネイル画像
  • テーマ画像を描画してからオリジナル画像を描画し、画像などを埋め込む

言葉で説明すると難しいですね。

こんな感じで三枚の画像を生成しています。

その他作ってみた感想

• OCRで縦書き認識で精度が出ない、、、
  • 絵日記テーマの本文を縦書きにするか横書きにするか結構最後まで迷った
  • 特に一行の最初がカタカナから始まるとうまく認識されないケースが多い
• OCR時に背景を取り除くジャッジをしたので、テンプレートっぽい表現ができない
  • 例えば、絵日記だと 月 日 天気: みたいなのを作りたいが、これに書き込まれた時のOCR用データは 1 18 晴れみたいになってしまう。
• ノートっぽいテーマは気に入っている
  • 5行ごとに罫線の端に丸がついているのがこだわりポイントです。
• canvas って CSS で背景設定できるんだ、というのが気づきポイント
• 古い記事との互換性について
  • テーマ機能リリース前に投稿された画像は背景が rgb(255 255 255 / 1)で塗りつぶされており、テーマ機能リリース後の投稿とは互換性がないため、古い投稿ではテーマ機能が使えない
  • 以前の投稿ではテーマ機能のボタンを無効化し、ツールチップで使えないことを伝えるように修正
  • 
• DBに保存されている記事のメタデータに作成したエディタのバージョン情報がない！！ のでこのあたりの制御がむずい！！
  • 7月ごろに作ってる時は入れよ〜っと思ってたんだけどね。完全に忘れてたね。
  • 今回修正しました。
• テーマ変更ボタンで思い出したけどこのアイコンで通じるのか...? テーマ変更、みたいな一般的な概念あんまりないっぽくて、 material icons に一発でそれとわかりそうなアイコンなかったんだよね
  • dark mode とかのスイッチはある
  • そもそも material icons にないということは一般的な概念ではない*2ので、アイコンではなくテキストで表現した方が良いのでは?