画像「ヤフー株式会社 - メインビジュアル」

200万行でも高速に表示~パフォーマンスにこだわり続けた広告入稿管理システム

概要

検索エンジンが日本市場で過半数のシェアを誇り、業界をけん引するヤフー株式会社様では、ポータルサイト『Yahoo! JAPAN』の運営を軸に200以上のサービスを展開している。
このうちの1つ、インターネット広告事業では、『Yahoo! JAPAN』の検索結果にキーワード広告を表示する「スポンサードサーチ」やコンテンツ内の広告スペースにバナーなどを表示する「Yahoo!ディスプレイアドネットワーク(YDN)」などを取扱っており、業種・業界を問わず数十万の企業に利用されている。
この2種類の広告入稿管理システム『キャンペーンエディター®』の開発に『ComponentOne Studio』を採用いただいた。
200万行を超える大量のキーワード広告を入稿・運用するにはExcelでは限界があったため、システム化にあたってはグリッドのパフォーマンスを最も重要視した。
ComponentOne Studioの『FlexGrid』は、他社のサードパーティ製品と比べ2~3倍は描画速度が速かったという。
同システムを開発するに至った経緯や課題のほか、今後注力していきたいというWPFでの開発について、ヤフー株式会社 メディア・マーケティングソリューションズグループ マーケティングソリューションズカンパニー 開発本部の松山 郁往様、高見 拓也様、山口 裕之様にお話を伺った。

画像「ヤフー株式会社 - 松山 郁往様」

松山 郁往様

ヤフー株式会社
メディア・マーケティングソリューションズグループ
マーケティングソリューションズカンパニー 開発本部
エンジニア

画像「ヤフー株式会社 - 高見 拓也様」

高見 拓也様

ヤフー株式会社
メディア・マーケティングソリューションズグループ
マーケティングソリューションズカンパニー 開発本部
エンジニア

画像「ヤフー株式会社 - 山口 裕之様」

山口 裕之様

ヤフー株式会社
メディア・マーケティングソリューションズグループ
マーケティングソリューションズカンパニー 開発本部
プロジェクトマネージャー

CSVによる入稿管理の限界 膨大な情報量を管理する仕組みが急務に

ポータルサイト『Yahoo! JAPAN』TOPページの検索窓から任意のキーワードを検索すると、検索結果画面の上位に、検索したキーワードに関連する広告が表示される。
これが『Yahoo!プロモーション広告』の1つ『スポンサードサーチ』である。スポンサードサーチは開始から10年以上、CSVでの入稿体制をとっていた。

画像「ヤフー株式会社 - 山口 裕之様」
山口氏

「入稿は広告主が行いますが、設定が必要となるのはキーワードだけではなく、曜日、時間帯、地域といった30近い入力項目が必要です。ECサイトなどは商品1つ1つにキーワードを設定するので、CSVファイルは200万行以上になることもあります。」

約30項目の設定を掛け合わせたCSVは多次元のデータとなり、一般ユーザーが扱うには限界がある。
また、CSVのデータ量は20MB以上になることもあり、入稿のためのアップロードに、長い時は1時間以上かかっていた。

画像「ヤフー株式会社 - 山口 裕之様」
山口氏

「CSV入稿は、1項目でも入力を間違えているとエラーが出てしまいます。エラー判定はアップロード時に行うため、1時間待って、初めて入稿できないと気付くことも。入稿のためのCSVファイルは、約30項目×200万行もの情報を正確に入力する必要がありました。」

こういった課題を解決するために開発されたのがWindowsフォームアプリケーション『キャンペーンエディター®』であった。

Excelの限界値へ挑戦

キャンペーンエディター®は、Yahoo!プロモーション広告の入稿情報をオフラインで編集し、広告管理ツールに入稿内容を反映できる入稿支援ツール。データの一括操作が可能で、かつ通信環境に影響を受けずに編集作業を行える。

画像「スポンサードサーチとキャンペーンエディター®の関係」
スポンサードサーチとキャンペーンエディター®の関係
画像「ヤフー株式会社 - 高見 拓也様」
高見氏

「キャンペーンエディター®は大量入稿に適したシステムです。システムの開発にあたっては、約30項目×200万行という複雑なデータを分かりやすくする、ということが最優先課題でした。広告やシステムの知識が無いユーザーでも比較的簡単に入稿できる、というのが大きなメリットです。」

キャンペーンエディター®では、入力(変更)した項目に色が付く、エラーがある場合には即座に表示されるなど、CSVではできなかったことが実現された。
さらに、入力部分をExcelに貼りつけたり、逆にExcelからコピーしたりもできる。

画像「ヤフー株式会社 - 高見 拓也様」
高見氏

「キャンペーンエディター®ができたことで、バリデーションまわりの通知が整備でき、データの二次加工がしやすくなったうえ、アップロードを待つ時間が短縮されました。また、これまではサーバー側のリソースを使ってエラーチェックを行っていましたが、クライアントサイドでできるようになったため、サーバー負荷を減らすこともできました。」

これまでのCSV運用よりも優れた価値を提供するためには、Excel並の描画速度を持ち、Excelの限界値以上の行数(105万行以上)に対応しなければならない。
それを可能にするのがComponentOne StudioのFlexGridであった。FlexGridはスポンサードサーチのキャンペーンエディター®のメインビューに組み込まれた。

画像「スポンサードサーチ キャンペーンエディター®のメインビュー」
スポンサードサーチ キャンペーンエディター®のメインビュー

スポンサードサーチのキャンペーンエディター®をリリース後も、パフォーマンスにこだわった。パフォーマンスのチューニングには苦労し、満足のいく結果が出るまでに3年ほどの時間がかかった。その頃ようやく、これまでCSVで広告を運用していたユーザーがキャンペーンエディター®での運用に切り替わった。

こうして2016年秋に、スポンサードサーチではCSV形式での入稿サービスを終了することができた。

WPFで同等のパフォーマンスに挑戦

スポンサードサーチのキャンペーンエディター®が軌道に乗り、お客さまに評価された頃、今度は『Yahoo!ディスプレイアドネットワーク(YDN)』についてもキャンペーンエディター®を開発することになった。YDNは、『Yahoo! JAPAN』コンテンツ内および提携サイトの広告スペースに、年齢・性別・興味関心ごとなどでターゲティングし、バナーやテキストを表示できるプロモーション広告である。

YDNのキャンペーンエディター®は、高いデザイン性の要求があったことや、システムの将来性などを考慮し、WPFでの開発が決定した。スポンサードサーチと同じく描画速度を重要視したため、メインビュー部分にはFlexGridのWPF版を採用した。

画像「YDN キャンペーンエディター®のメインビュー」
YDN キャンペーンエディター®のメインビュー

また、入力制御には、グレープシティ製品の『InputMan for WPF』を利用した。入力チェックやカレンダー機能は特に、工数削減に貢献したという。

画像「InputManのコントロールを使用」
InputManのコントロールを使用

WPFでの開発は、Windowsフォームでの開発とどのような違いがあったのか、所感を伺った。

画像「ヤフー株式会社 - 松山 郁往様」
松山氏

「Windowsフォームの場合はコントロールを1から作らなければいけませんが、WPFはビューの部分だけを変えれば良いので、デザイナーから上がってくる画面デザイン案を再現しやすかったです。WPFは、表現力の豊かさがWindowsフォームと比べて非常に優れていると感じます。」

Windowsフォームで開発したスポンサードサーチのキャンペーンエディター®が高評価を得ていたため、パフォーマンスやエラーチェックは、YDNでも同じ機能を提供できるよう開発を進めた。

こうして、2017年1月25日に、YDNのキャンペーンエディター®をリリースすることができた。

“200万行のデータも高速に表示”が、他にはないポイント

開発工数削減を目的として、サードパーティ製品を導入することは開発前から決まっていた。繰り返すように、重要視していたのは『200万行以上のグリッドでもExcel並のパフォーマンスが出る』ということ。海外製品を含む5~6の他社製品と比較検討したところ、ComponentOne StudioのFlexGridが速度面で最も優れていた。

画像「ヤフー株式会社 - 松山 郁往様」
松山氏

「速度については、サンプルプログラムを作って各製品の比較検証をしました。FlexGridは大量データでも表示が最も速くメモリ消費も少ないので非常に満足しております。今後もストイックに速度・性能を追及してもらいたいですね。」

FlexGridのパフォーマンスとInputManの採用により、開発期間が半年~1年くらいは削減できたと実感しているという。最後に、キャンペーンエディター®の今後の展望についてもお話を伺った。

画像「ヤフー株式会社 - 松山 郁往様」
松山氏

「機能面としては、レポートの拡充を検討しています。グラフィカルに表示したり、紙に印刷したり。さまざまな要望を頂いており、TrueChartやMaps、ActiveReportsの利用も検討しています。」

画像「ヤフー株式会社 - 松山 郁往様」
松山氏

「また、Windowsフォームで開発したスポンサードサーチのキャンペーンエディター®についてもWPFに置き換え、デザイン性を向上させようと考えています。最終ゴールはYahoo!プロモーション広告のキャンペーンエディター®をすべて1本化することです。」

キャンペーンエディター®は、FlexGridが得意とする、軽量かつ高速であるという点を十分に活用し、システムの利用ユーザーからは好評の声が届いている。今後、新たなシステムの開発や、システム1本化の際にも、ComponentOne Studioをはじめとしたグレープシティ製品を利用する予定だという。

グレープシティでは、要望のあったパフォーマンスについて今後もますますの向上に取り組むだけでなく、サポート面・機能面と多角的に同社の開発に貢献できるよう、引き続き支援していきたい。

●本記事は 2017年3月現在のものです。

ヤフー株式会社 様

画像「ヤフー株式会社 - ロゴ」
所在地 〒102-8282
東京都千代田区紀尾井町1-3
東京ガーデンテラス紀尾井町 紀尾井タワー
設立 1996年1月
事業内容 インターネット上の広告事業
イーコマース事業
会員サービス事業 など
URL http://www.yahoo.co.jp/