文系プログラマによるTIPSブログ

文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。

webサイトの多言語化への道:その1:憤怒

現在お仕事でとあるサイトの多言語化をしております。プロジェクト開始から約1週間経過したのですが、色々と酷い事になっているので、日記ベースで綴っていこうと思います。


f:id:treeapps:20180418115102p:plain

とにかくこのプロジェクト、


酷い!酷過ぎる!


はい。あまりにも酷いので、憤怒中です。何が酷いのか、順番に見ていきます。

状況

既にA国の多言語化は済んでおり、現在日本語とA国語の2ヶ国に対応しています。
ちなみにその時開発していたメンバーはもう1人も残っておらず。

派遣社員が・・・

はい。定番ですね。

何故か解りませんが、私の会社に来る派遣社員は結構な確率で1日も出社しない、出社日当日に何故か急病、暫くすると突然失踪、毎日激しく遅刻する(昼過ぎに来る)という素晴らしい人材が集まります。

そんな有能な彼らですが、今回もその有能っぷりを発揮したようで、出社日当日に何故か急病になり、2週間近く経っても回復せず、です。。。そういえば大分前の開発でも同様に出社日に何故か急病になって、そのまま退場してたなあ・・・そしてその欠員を募集している訳ですが、そんなすぐ適切な人材が来る筈も無く・・・・

おや?また派遣社員が・・・

はい。これも定番。

別のプロジェクトで働いている派遣さんが、こちらのプロジェクトに参画されるのですが、既存プロジェクトの遅れによって参画が遅れるとのこと。。。

おやおや?別の派遣社員が・・・?

前述の2名とは別に、保守で一緒に仕事している方がいるんですが、その方は複数プロジェクト掛け持ち+保守もやっているので、今回の追加開発にメインで入れず、別プロジェクトの方がかなり忙しく、実質戦力になっていません。


・・・・・ん?



私のみの1人チーム完成\(^o^)/




いやっほーーーう!


嬉しいぜ!


当初自分含めて4人のはずが、サックリと1人チームになりました!

4人力だぜ!やったぜ。
私もプロジェクト5〜6個掛け持ちで、運が悪い事に全部のプロジェクトが動いているというオマケつき!これはもう泣くほど嬉しい!


さて、もうこの時点で状況は最悪です。しかし悪夢はこれだけではなかったのです。

1国1言語しか無い前提のキチガイ設計

はい。絶句ですね。何故か解りませんが、1国1言語で設計されているのです。



\(^o^)/



凄いよ。インドとか、1国に数十言語有ったりするのに、1国1言語前提の設計・実装がされている!!

条件分岐が・・・!?

最初に私の目に飛び込んできたのがこんなコードです。

if (!CountryUtil.isACountry()) {
    // 日本の場合◯◯する
}


\(^o^)/


「日本の場合」という条件分岐ではなく、「A国で無かった場合」という条件分岐で日本を判定している・・・!!!

  • 日本
  • A国
  • B国

と増えたら、この分岐じゃ日本とB国が該当しちゃうぞ〜♪♪♪ 素敵〜♪♪♪♪

これでは否定を否定して肯定しているような書き方です。これは惚れる。このコードは広範囲に書かれているので、おかげ様で全部書き直しです。ありがとうございます。

もっと条件分岐が・・・!?

さて、勘の良い方は前述の分岐で気づいたかもしれません。この分岐、根本的におかしいのです。

そもそも国ごとの条件分岐を使う部分ってほとんど無いんです。言語単位の条件分岐を書かないと、不足しているのです。

言語単位の分岐

例えば香港は広東語・英語等があります。
現在広東語のページを表示しているなら、広東語の文言・画像を表示する必要があります。現在英語ページを表示しているなら、英語を表示する必要があります。国ごとの分岐だと、この分岐ができないのです。(そんな分岐が不要な設計にすべきですが、時既に遅し。2年くらい遅かった)

という事で、国ごとに判定している部分が全部書き直し!嬉しい!!

おや?画像フォルダが・・・?

画像フォルダといえば、
/image/
がルートディレクトリになりますね。
ここを多言語化しようとすると、

/images/ja-jp/lcon/ico-1.jpg
/images/en-hk/lcon/ico-1.jpg
/images/zh-hk/lcon/ico-1.jpg

といったフォルダ分けをする等が考えられます。例えば香港の場合のURLの構成はこうだとします。
http://localhost.hk/
そして画像パスはこう。

<img src="/images/ico/ico-1.jpg">

apacheのrewriteで、ホスト名が「.hk」で終わっていたら、/images/ を /images/hk/ にrewriteするルールが書いてあります。

しかし、これは1国1言語の話です。では、香港に英語が追加されたら?言語を指定する場合は以下のように指定します。
http://localhost.hk/en/
で、画像パスは以下のように書かれています。

<img src="/images/ico/ico-1.jpg">


・・・・・ん?


/images/ico/ico-1.jpgを/images/en_hk/ico/ico-1.jpgにrewriteしたいが、画像URLからenが取得できないぞ!!


困りました。画像パスからは今英語を指定しているのか指定していないのか解りません。つまり画像パスをrewriteする事ができません。

これの解決策は3つ。3つともrewriteで無理やり /en_hk/ を付加するのをやめた場合のケースです。

対策1:画像パスに言語コードを埋め込む

<img src="/images/${languageCd}/ico/ico-1.jpg">

これはパスの修正が必要になった時に困りそう。避けたい。

対策2:javascriptで画像パスを書き換える

dom構築後に一括で画像のsrc属性値に言語コードを埋め込む処理をしてみましたが、遅い。遅すぎる・・・画像数が多い一覧画面なんかは特に遅いです。DOM構築完了までの時間、画像が404になってしまうし、構築後にニョキッと画像が埋まり出す挙動は絶対NGでしょう。

対策3:カスタムタグを使う

今回jspを使っているので、カスタムタグを作り、サーバ側で今どの国のどの言語を選択しているか判別し、htmlにレンダリングする時点で、/images/en_hk/ と書き込む。これが一番現実的で後々の修正で困らなそうですが、既存のimgタグを全部書き換える作業は避けられない・・・やっぱり既存の画像タグをカスタムタグに置き換える作業、デグレード乱発祭りになりそうで怖い・・・

おや・・・・?納期が・・・・・?

人員は実質私1人、PMはそもそもいない、営業は多忙過ぎてほとんどリソースが避けておらず、要件が固まらない。納期は今月末。人員は増えないが納期は変わらず。更に、来月もう1言語増やしたい!と意気込んでいらっしゃるご様子。


/^o^\ドカーン !!


失敗例のまとめ

長い茶番でしたが、ここからが本題。
今回軽く開発してみて、以下の失敗が浮き彫りになりました。

  • 1国には複数言語あるよ!
  • 国ごとに通貨・日時・電話番号の書式が違うよ!
  • 為替を表示する場合は国ごとに表示する通貨が変わる可能性があるよ!
  • URL上で言語指定しない場合はデフォルト言語を指定したとみなすよ!
  • 現在のURLを保ちつつ、言語を切り替える要件が発生するよ!
  • 同じ国でも言語によって文言の量が変わるし、画像ファイルのサイズも変わるよ!
  • 翻訳するための辞書の仕組みを事前に用意しておいた方がいいよ!
  • 翻訳を依頼する時は、画面なのかメール文面なのか、画像なのか、ラベルなのか、画像のaltなのかを分けておいた方がいいよ!そうしないと「あれ?この翻訳どこに適用すればいいの?」ってなるよ!
  • 中国語とか全くよめないから、正しいのか誤っているのか全然解らないよ!
  • 画像の翻訳漏れは気づけないから、ダミー画像でも入れといて、翻訳完了したらダミーを正式画像に上書きすると画像翻訳漏れに気づけるよ!
  • 同様にラベルの翻訳漏れも、とりあえず「TODO」と定義しておけば、翻訳漏れに気づけるよ!
  • DBから取得される値は日本語で、その日本語を各国語に変換する辞書の仕組みが必要になるよ!
  • 同様に、java側でenumで定義した日本語定数を翻訳するための仕組みが必要になるよ!
  • htmlのid属性値に「en_hk」とか書いちゃうと、言語毎にidが変わって後で死ぬから、汎用的にした方がいいよ!
  • この国のこの言語のみ、この文章を表示する、という要件もあるよ!
  • 静的ページの多言語化はSSIとか使って上手いこと設計しておかないと、手動でhtmlを編集する事になるよ!


俺、このプロジェクトが終わったら1ヶ月休暇取るんだ


なんという死亡フラグ・・・!というかもう半分死んでないか