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

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

WOVN.ioについて

Webサイトの多言語化・翻訳対応を丸投げできるサービスです。資産は日本語のまま、JSタグを追加するだけでGoogle翻訳のように翻訳をしてくれます。Google翻訳とは異なり、辞書を登録したり、人力で翻訳をしてもらうこともできます。

ちなみに読み方は「ウォーブン」だそうです。私の周りでは「ウーヴン」や、「オーブン」など様々な呼び方がされていました。ちなみに初期はみんなビビって「ダブリューオーヴィエヌ」と呼んでいました。ASUSみたいですね(伝わります?)。

WOVN.io | Make your website multilingual
WOVN.io is a website localization service. In just a few simple steps, expand your reach, in any language.

Webエンジニアとしては、システム上での多言語対応はほとんどしなくて良くなるのでかなり開発が楽になります。

しかし、サービスの特性上、ユーザーがサイトを開いたときに、表示されている文言がすべてWOVNに送信され自動登録されてしまいます。個人情報や、動的な数値などがすべて登録されてしまい、セキュリティ面でも費用面でも問題があります。

wovn-ignore属性について

そこで、抽出対象外を設定するwovn-ignore 属性というものが用意されています。

Security check

HTML属性にwovn-ignoreを追加するだけでそのタグ内はすべて除外されます。

<div>会員名:<span wovn-ignore>まっしろブログ</span>様</div>

ちなみに似た設定に「コンテンツ除外ルール設定」や「ライブ編集」があるのですが、WOVNにログインしないと対象かわからなかったり、誤って設定を変更してしまったり、HTMLの構造変更で対象が認識されないなどの危険があります。確実な運用ができないので個人的には使用しないほうがいいと思います。

wovn-ignoreを入れ忘れる

WOVNを入れる予算が確保できるほどの大規模サイトであれば、wovn-ignore属性を設定するべき箇所は無数にあるはずです。

そんなプロジェクトで何人もの開発者が携わると絶対に発生するのが属性の「入れ忘れ」、「スコープ漏れ」、そして「スペルミス」です。しかも、入れ忘れていないか確認する方法がソースコードを確認するしかないという苦行です。

そこで、絶対に誰が開発しても「入れ忘れ」、「スコープ漏れ」と「スペルミス」を防止できる方法を発明したので、皆さんに伝授したいと思います。

・・・いきますよ!?

こちらです!!!

↓↓↓

*[wovn-ignore] {
  background: fuchsia;
}

会員名:まっしろブログ

↑↑↑

なんということでしょう!wovn-ignore属性のただのテキストがたった3行のCSSでドギツい赤紫色に生まれ変わったではありませんか!
えっ、こんなもんか、と思われたと思いますが、閃いたときにはプロジェクトメンバーから天才と褒められましたよ。そのぐらいソースコードで確認するのは苦行だったのです。

これなら絶対に間違えません。しかも、サイズなどに変更がまったくないのでデザインの影響もありません。
私が携わっていた案件では、あまりにもミスが多かったので開発環境のみこのCSSが設定されています。さすがに…という場合はブラウザのユーザースタイルシートや開発者ツールで設定するという方法もあります。

サイトのデザインと同化せず存在感を放つ色を選定してみてください。

テストでも確認できる

とはいえ、目視で確認するのは限界がありますし、人間なので見逃してしまうことがあります。
対象の部分についてwovn-ignore属性が付いているかどうかを確認するテストを書けば解決する話でもあります。

単体テストで書くのは大変なので、e2eテストを用いて、外部データがすべてwovn-ignore属性に囲まれているかのテストを書くととても楽にテスト自動化することができます。後日時間があれば追記します。

まとめ

  • (WOVN………うぉーぶん………覚えましたし)
  • 発想の転換でプロジェクトの仕事効率を上げたり、ミスを減らすことができる
  • 私が携わる多言語対応必要なすべてのプロジェクトにWOVNを入れてほしい(叶わぬ夢)

コメント