とある会社に頼まれたデジタルメイクできるwebページ制作で発生した稀な不具合現象

webページなら5秒で作れてしまう、下駄です。 ウソです。 でも、webページはだいたい1日あれば、どんなページでも作れるので、コツさえ覚えてしまえばいいという事ですね。 先日、とある大手化粧会社から、webページを作って欲しいという依頼をいただき、作らせてもらったんですが、 そのページというのは、webブラウザ上で、化粧を体験することができるという、CanMakeというAPIを使っていて、デパートの化粧品売り場などでも使われている製品なのだそうです。 https://www.canmake.com/makeup-simulation/ 上記URLでサンプルお試しができるので、興味のある人は試してください。

webページ作成は問題なく終わったのだが・・・

そして、程なくいただいた希望デザインを元に、webページを構築することはできたんですが、納品した先で、なんだか表示がおかしいとの返答がありました。 その内容は、口紅を試した時に、口の周りが緑色になるという現象が起きているとのこと。 そして送られてきた画像がこちら。 なるほど、なかなかウケる画像です。

原因究明への長い旅

でも、webページ側では、apiに値を渡しているだけなので、画像に問題をきたすということは考えにくいと思って、おそらく使っているブラウザのアドオンなどが問題なのだろうと考えて、先方に詳細を聞いてみたトコロ、同じアドオンをいれてもこちらでは再現せず。 当初webブラウザごとに画像に差が出るというのは、あまり聞いたことがないので、正直なにが問題なのか理解できませんでした。 不具合が起きているのは、windows端末ということで、これも自宅にあったwindows10マシンで検証してみたところ、やはり再現せず。 さらに、この事象は特定の会社だけで起きているとの事で、その会社のネット回線が問題なのかと思ったんですが、その会社でも事象が発生しているpcとそうでないpcがあるという報告が入った。 もはやこの時点で、事象の原因への想像すらできなくなっていたので、もしかしたらapi内部の問題なのではないかと思い、このapiの開発元に対応を丸投げしてしまいました。

解決の糸口

とにかく、再現性が全く無く、問題が発生している方からの情報しか手がかりがない中、動画が送られてきて、そのpcでは100%の確率で、この不具合が発生している様子が映されていた。 再現ができないことが最大の謎だったのですが、問題が起きているのはwindowsのノートPCのメーカーと機種番号、スペックなどの情報を聞いたトコロ、P社のL端末で有ることがわかりました。 まあまあメジャーな端末であったので、api提供会社で同じ機種があり、その端末で見たトコロ、なんと再現したそうです。 そこから、調査したところ、どうやら、その機種のGPUが問題であることがわかりました。 このAPIは端末のGPUを使って処理演算していたという事もわかり、これらの不具合を解消したapiモジールをアップロードしてもらい、なんと事なきを得ました。

不具合体験からのレベルアップ

この事象で4日ほど費やされてしまったんですが、これがユーザー側で起きていたと考えたら、非常に怖い不具合で、開発元でも理解できていなかった不具合だと考えると、称賛すべきデバッグであったとも考えられます。 API開発元は、感謝すべきですね。 自分がこの開発元であったとしたら、メシぐらいおごっているはずです。 何にせよ、webでこうしたハードウェアに依存するシステムを作っているのであれば、障害報告の時点で、まあまあ勘ぐりどころはあるはずなのに、なんとも頼りない開発であるというのは、個人的にココロにとどめておきます。 何にせよ、無事に納品が終わって、きれいに事が解決したことに乾杯！