wovn-ignoreを入れ忘れない方法

Webサイトの多言語化・翻訳対応を一任できるサービスWOVN.ioにおいて、個人情報や動的な数字がWOVNに送信されないように翻訳抽出対象外にするwovn-ignoreを設定し忘れない方法を紹介します。

WOVN.ioについて

Webサイトの多言語化・翻訳対応を丸投げできるSaaSです。資産は日本語のまま、JSタグを追加するだけでGoogle翻訳のように翻訳をしてくれます。Google翻訳とは異なり、辞書を登録したり、人力で翻訳をしてもらうこともできます。
ちなみに読み方は「ウォーブン」だそうです。私の周りでは「ウーヴン」や、「オーブン」など様々な呼び方がされていました。ちなみに初期はみんなビビって「ダブリューオーヴィエヌ」と呼んでいました。ASUSみたいですね?
WOVN.io | Web サイトの多言語化・翻訳対応は WOVN.io
https://wovn.io/ja/
Webエンジニアとしては、システム上での多言語対応はほとんどしなくて良くなるのでかなり開発が楽になります。
しかし、サービスの特性上、ユーザーがサイトを開いたときに、表示されている文言がすべてWOVNに送信され自動登録されてしまいます。個人情報や、動的な数値などがすべて登録されてしまい、セキュリティ面でも費用面でも問題があります。

wovn-ignore属性について

そこで、抽出対象外を設定するwovn-ignore 属性というものが用意されています。
抽出無視タグ(wovn-ignore 属性) – WOVN.io HelpCenter
https://wovn-support.zendesk.com/hc/ja/articles/360007899791
HTML属性にwovn-ignoreを追加するだけでそのタグ内はすべて除外されます。
会員名:<span wovn-ignore>まっしろブログ</span>
ちなみに似た設定に「コンテンツ除外ルール設定」や「ライブ編集」があるのですが、WOVNにログインしないと対象かわからなかったり、誤って設定を変更してしまったり、HTMLの構造変更で対象が認識されないなどの危険があります。確実な運用ができないので個人的には使用しないほうがいいと思います。

wovn-ignoreを入れ忘れる

WOVNを入れる予算が確保できるほどの大規模サイトであれば、wovn-ignore属性を設定するべき箇所は無数にあるはずです。
そんなプロジェクトで何人もの開発者が携わると絶対に発生するのが属性の「入れ忘れ」、「スコープ漏れ」、そして「スペルミス」です。しかも、入れ忘れていないか確認する方法がソースコードを確認するしかないという苦行です。
そこで、絶対に誰が開発しても「入れ忘れ」、「スコープ漏れ」と「スペルミス」を防止できる方法を発明したので、皆さんに伝授したいと思います。
↓↓↓
*[wovn-ignore] {
  background: fuchsia;
}
↑↑↑
なんということでしょう!wovn-ignore属性のただのテキストがたった3行のCSSでドギツい赤紫色に生まれ変わったではありませんか!
これなら絶対に間違えません。しかも、サイズなどに変更がまったくないのでデザインの影響もありません。 私が携わっていた案件では、あまりにもミスが多かったので開発環境のみこのCSSが設定されています。さすがに…という場合はブラウザのユーザースタイルシートや開発者ツールで設定するという方法もあります。
サイトのデザインと同化せず存在感を放つ色を選定してみてください。