緑川晃、ニックネームはmido。趣味ではUNIX/Linux互換OSをゼロから開発するほど、低レイヤーな技術を愛する画像処理エンジニア。そんな彼が開発に関わっているのは、オリジナルグッズを制作できるサービス「pixivFACTORY」です。オリジナルグッズの制作は、PCに特化した特別な制作ツールと、それを扱えるだけの専門的知識、スキルが求められていました。グッズを作るという活動は、ごく一部のクリエイターにだけ与えられた特権でした。そんな常識を覆したのが、pixivFACTORYです。スマホの制作ツールでも扱えるような、一般的な画像形式のイラスト画像を準備するだけ。それだけでグッズを制作できるという、グッズ制作のあり方に一石を投じたサービスです。その仕組みを支える裏側では、ImageMagick、BlenderなどのOSSや、Goなどのプログラミング言語を駆使し、画像ファイルのバイナリデータを舐め尽くすことで実現した、ディープな画像処理システムが動いています。その開発に関わったmidoから、pixivFACTORYの現場で実際に活用されているイラスト画像処理技術の過去、現在、未来について語っていただきます。pixivFACTORYって、イラスト画像をポイってブラウザに投げ込んだだけで、マグカップとかアクリルキーホルダーとか、オリジナルグッズが簡単に作れるのがウリだと思っているんですけど。それに加えて、イラスト画像をポイッとブラウザに投げ込んだ結果、その場でグッズの完成予想写真である「商品プレビュー」を確認できる機能も注目を集めています。pixivFACTORYでオリジナルのアクリルキーホルダーを制作するデモ動画。)好きなイラストを描いて、それを元にしたイラスト入りグッズの商品プレビューを作って。それを観て、グッズを作った気分だけ味わって満足するユーザーさんもかなりいます。自分だけのオリジナルグッズを作るという、行為そのものを楽しんで頂けるサービスですね。作る前から作った気分になれる、グッズを作るリアル感を味わえる体験って、今までにあまりなかったことですよね。初期からそういう狙いがあるサービスだったんですか?2年前、pixivFACTORYがスタートした時点で、すでに商品プレビューを表示する機能がありました。今ほど強いこだわりはなかったです。仕組みも、今では考えられないほどシンプルでした。商品プレビューの生成には、ピクシブでも実績が多かったImageMagickというOSSを使ってます。缶バッジは、ユーザーさんがアップロードしてきたイラスト画像ファイルを、缶バッジの丸い形にあわせてカットして。そのあと、あらかじめ用意しておいた影とか光沢が描かれている画像ファイルを合成処理して、それっぽく立体感をだしているだけでした。当時はノウハウなんて何も持っていなくて。すればリアル感のある商品プレビューが作れるのか、まったく想像もできなかったんです。なにがきっかけで、商品プレビューは今のようなリアル感を追求し始めたんですか?うーん...。私が「クオリティを上げていこうぜ!」って、言ったわけじゃないんですけどね(笑)。リリースの責任者からすると、作れるグッズの種類を増やしたほうがサービスの成長に直結するから「とにかくもっと早く開発して!」という意識が強くて。一方で、同じチームで働いてるデザイナーやエンジニアからは「もっとキレイにみせよう!」「もっとリアルさが感じられるようにしよう!」とかいう意見が飛んできて。喧嘩してますね(笑)。板挟みにあってました(笑)。私がpixivFACTORYチームに移ったのは、サービス自体がスタートしてからしばらく後なんですよ。それまでは、画像処理に力を入れるだけのリソースがなかったんです。...「クオリティを上げてくれそうな人がウチにきた!」っという、そういう期待感みたいなのがチームから感じられたんです。熱気を感じているうちに、もっと頑張ってみようという気持ちが沸いてきたんです。商品プレビューを良くしていくために試行錯誤をしたんだと思うんですけど、具体的に何から手を付けたんですか?一番最初に試行錯誤したのは、「タンブラー」というグッズの商品プレビューを作った時です。それまでは、平面のままイラスト画像を合成するだけでも、商品プレビューが作れるものばかりだったんです。タンブラーは、イラスト画像を歪ませないと、商品プレビューとして成立しないんですよ。他社さんではすでにそういう商品プレビューを作った実績があったようですけど、そんなニッチなことを解決する方法なんて、ググってもでてこないんですよ。でてくる程度のことなら、似たようなことができるサービスがごろごろ転がってますよ!そうですね(笑)。それで、やりかたを探ってるうちに、「ディスプレイスメントマップ」を使えばできそうという感触が得られてきまして。その時すでに使っていたImageMagickだけやれそうだから、まずはその方法でチャレンジしてみました。ディスプレイスメントマップというのは、テクチャーマッピングの一種です。画像の各ピクセルに対して、歪み度合いを指定するマッピングデータ(変位マップ)を作らなくてはいけないんですけど、これがなかなか大変でして。泥臭いことやってますよね。ええ、すごく泥臭かったです。技術的には決して綺麗なものではなかったですね。毎日毎日、超アナログなやり方で調整作業ばかりをしていました。いい感じの歪みになるよう、マッピングデータを微調整するという手作業の繰り返しです。普通のエンジニアの神経だったら、絶対に続けたくない作業ですね。なんとかして楽にできないかなぁと思って、試行錯誤をしていたんです。その時に、BlenderというOSSに出会ったんです。サービスで活用するために、3Dモデルにマッピング処理するコマンドをC++で自作していたんです。そんな試行錯誤をしてくうちに、そもそも独自コマンドなんて使わず、直接Blenderでやってしまえばいいんじゃね?って発見があったんです。Blenderはヘッドレスで動いて、PythonでBlenderの処理を自動化できるんですよ。Blenderでいいじゃんって。いう特殊なツールって、インフラから拒否されそうですけど。導入する上での課題をクリアして、その上でインフラに話したら「なるほど!」という一言と共にすんなりインストールしてくれました。あと、ピクシブは技術選択を現場に委ねる会社なので、Blenderも最初は独断みたいな感じで、勝手に使い始めていましたね。ユーザーのニーズに深く入り込むほど、汎用的なツールは役に立たなくなるBlenderの導入以来、泥臭いものはどんどん消えていきました。今のpixivFACTORYでは、商品プレビューを作るために、ImageMagickとBlenderの両方の良い所を活かして実装する方針です。うーん、やっぱりそうなりますよね。サービス開発って、基本的には汎用的な道具をうまく活用するだけで十分なんですけど。ユーザーニーズに深く入り込むほど、汎用的なツールじゃ解決できないと思ってて。今までに色んなツールを調べて検証したんですよ。惜しいなって思うツールならあるんですけど、pixivFACTORYというサービスにぴったりフィットするものがなくて。特化したツールを内製で作らざる得なくなるんです。アクリルキーホルダーというグッズがあるんですけど、その制作方法はかなり複雑でして。ユーザーからアップロードされたイラストのデータだけでなく、アクリル板のどこをカットするのかというパスデータがないと、印刷所は受け取ってくれません。ユーザーが簡単に作れるようにしなくてはいけないから、パスデータをいい感じに生成する独自アルゴリズムを考案してまして。様々なアルゴリズムを検討して、パフォーマンスを改善したり。それでも最後はやはり、ループ処理がボトルネックになるんですよ。アルゴリズムだけの改善に限界がくるんですね。そこで、RubyだったものをGoに作り直したら、何十倍もパフォーマンスが改善されたりして。プライベートでOS作ってる時にあれだけCを使ってるのに、仕事には使いたくないと(笑)。CやC++はセキュアに書くために、色々と気を使わなくてはいけないんです。一人でやる分にはいいんですけど、チームで扱うならGoがいいんじゃないかと。GCもありますしね!Rustを使うという案もあったのですが、ピクシブではGoを使ってるプロジェクトが多くて、ノウハウも溜まってたんです。好みというよりは、必要に迫られてGoを使ったという感じです。本題にいきましょうか。pixivFACTORYは、画像処理技術を追求することが、サービスにとって重要な価値になっているんですけど。それは今後、どのように発展していくんでしょうか。これから先の、未来の話を聞きたいです。ImageMagick・Blenderを使った画像合成技術mido2012年に会津大学を卒業し、新卒入社。ソフトウェアエンジニア。Railsなサービスの開発を担当。現在は、オリジナルグッズ作成サービス「pixivFACTORY」の開発をしている。Reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。