Wijmo採用でユーザーのニーズを実現！広告代理店の“リアルな課題”を解決した開発事例

インターネット黎明期からケーブルテレビ回線をインターネット回線として活用する事業を展開し、積極的にインターネットサービスの普及に取り組んできた、サイネット株式会社。2024年10月には「アップクロス株式会社」を吸収合併し、現在は広告業界に特化した販売管理システム「ADMAN（アドマン）」をクラウドサービス事業部で開発・提供している。ADMANの開発には、メシウスのJavaScriptライブラリ「Wijmo（ウィジモ）」を採用し、主要な機能の多くをWijmoのコントロールで実装したという。その経緯や活用方法について、デジタル事業本部 クラウドサービス事業部の飯尾さま、末田さまに詳しくお話を伺った。

広告代理店における原価管理の課題から誕生した、利益を「見える化」する仕組み

―はじめに、御社が展開するクラウドサービス「ADMAN」について教えてください。

飯尾さま
ADMANは、広告代理店向けの販売管理システムです。売上と請求の管理、入金の管理、仕入れ業者が発注を行った際の支払いなどを、トータルで管理します。最終的には財務会計システムに仕訳データを連携するシステムとなっています。
販売管理システムは多くありますが、広告業向けに特化したシステムは世の中にほとんどありません。

―「ADMAN」の開発はどのような経緯で始まったのでしょうか？

飯尾さま
クラウドサービス事業部は元々「アップクロス株式会社」というサイネットのグループ会社でした。アップクロスが、某システム会社からADMAN事業を事業承継して設立した会社です（2024年10月にサイネットと吸収合併）。
ADMANは30年以上前に広告代理店様の業務コンサルから始まったシステムです。当時の広告業界では原価を正確に管理できておらず適切な収益管理ができていないという課題がありました。
広告案件は、イベントやクリエイティブ制作など、内容に応じて細かな外注費や仕入れが多数発生します。そのため収益が確定しにくいという業界特性があります。
そこでADMANは「売上と原価を一体で管理し、案件の収益性を可視化する」ことをコンセプトに開発しました。さらに、テレビ・ラジオ・新聞など多様な媒体取引をまとめて管理できる点も、広告業向けシステムとしての大きな特長です。

―「ADMAN」で採用されているテクノロジーについて、フロントエンドとバックエンドそれぞれ教えてください。

飯尾さま
フロントエンド、バックエンドともにAdobeのColdFusionを使い、サービスをクラウド環境で提供しています。

―「ADMAN」の開発の中でWijmoを採用された理由を教えてください。

飯尾さま
とあるお客さまから「クロス集計表のような画面を作りたい」「表の色味をカスタマイズしたい」といったご要望をいただきました。しかし、従来の開発手法では、ご希望どおりの見た目を実現することが難しい状況でした。そこで末田と私で調査を進めたところ、まずメシウスの「SpreadJS（スプレッドJS）」に出会い、「これなら応えられるのでは」と感じました。メシウスへ問い合わせて要件を相談したところ、より要件に適した「Wijmo」を紹介いただき、最終的にWijmoを採用することになりました。

―Wijmoを採用する決め手はありましたか？

飯尾さま
いくつか他社のライブラリも試してみましたが、Wijmoは非常に使い勝手がよかったです。先ほどの「画面をカスタマイズしたい」とおっしゃっていたお客さまのやりたいことがWijmoだと実現できる、というところから採用しています。SpreadJSも一時期利用していましたが、Wijmoの方がお客さまから求められていた要件に、よりマッチしていました。

Wijmoのコントロールを多数採用。Excel出力機能が大きな強みに。

―「ADMAN」の開発ではどのWijmoのコントロールを採用されたのでしょうか？また、どういった機能の実装にご利用されたのか教えてください。

飯尾さま
いま、メインで使っているのはADMANの「フォーキャスト」という機能で、Wijmoの「MultiRow」と「FlexChart」で作っています。
例えば、2024年10月からのデータをもとにして「受注確度別」や、予算との対比を表しています。集計結果をクリックすることでドリルダウンができるようになっていて、受注の中身を詳しく見ることもできます。また、累積グラフを作るのにも活用しています。
もともとは帳票でクロス集計表を管理していたのですが、同じものを画面で再現しようとすると、どうしてもコードが膨大になってしまって、開発負荷が高かったんです。そこでSpreadJSかWijmoかで比較検討した結果、WijmoのMultiRowが適していると判断しました。

飯尾さま
売上の一覧や原価の一覧もWijmoで作っています。Wijmoの「FlexGrid」でフィルタ機能を実装したり、「MultiRow」で1レコードを複数行に表示させたりしています。「抽出条件」で、お客さまが表示条件を自由に選択できるのが便利だと感じています。

末田さま
Wijmoを利用しない場合、「このセルにどの値を表示するか」「そのフォーマットはどういうものか」を一つ一つ指定しなければいけませんでした。Wijmoだと列ごとにデータバインドやスタイルの設定ができるので、コード量が少なく済み非常に助かっています。

飯尾さま
表示した内容をそのままExcelに出力できるという点でも役に立っています。今まではPDF出力かCSVのデータ出力で対応し、Excelでの出力はお断りしていました。Excelですべて検証しなければいけないのと、バージョンによって違いが出てしまうからです。
「セルを固定してこのセルにはこのデータを出す」という仕様ならできますが、「表示順を変えてExcel出力する」のが自力では難しく工数がかかります。お客さまが自由に中身を編集できる仕様となると、列・行が変わってしまうので、それではExcel出力ができませんでした。Wijmoでそれができるようになったのは大きなメリットです。

末田さま
フロントエンドはHTMLベースで作っているのですが、テーブルを動的にするとなると、どうしてもコード量が多くなってしまって大変なんですよね。その点、Wijmoはデザイナ上でドラッグ＆ドロップするだけで列の並び替えができたり、一度取得したデータを保持してくれたりと、開発者にとってありがたい存在です。

―画面表示だけでなくExcelに出力したいというニーズはよくあるのでしょうか？

飯尾さま
お客さまから「画面に表示したものをExcelでダウンロードできないか？」という要望は必ずあります。なので、Excel出力できるというのはかなりアピールポイントになると思います。

ローカルストレージ活用で、ユーザーごとに適した画面を提供

―Wijmoを組み込むときの使い勝手はいかがでしたか？

末田さま
Wijmoのデモを初めて見たとき、使用するフレームワークごとに実装例が用意されていて、とても助かりました。サイトを見ながら組み込んでいくだけでスムーズに構築できました。ReactやAngularといったJavaScriptフレームワークを使用した実装例だけでなく、PureJSの実装例もあり、とても助かりました。もし実装例がVue.jsだけといった限られたものだったら、おそらくかなり苦労していたと思います。

―サポートは利用されましたか？

末田さま
デモを見るだけで開発できたので、サポートを使うことはなかったです。
逆にデモに頼りすぎてしまって、実際にやりたいことが「あと少しなのにな」と思うこともありました。「デモのこれとこれを組み合わせればできるのにな」と。

―デモをご活用いただきありがとうございます。開発中のお悩みはぜひお気軽にサポートサービスをご利用ください。次に、Wijmoの導入効果についてお話をお伺いできますか？

末田さま
先ほどお見せした売上一覧を作る場合、工数的にはWijmoを導入する前と比べて1/3くらい削減できたと感じます。フィルタリングできる機能をHTMLで組むのは非常に大変ですので。

―ローカルストレージ活用もしている、というお話を伺っていましたが、具体的にどういった機能に用いているのでしょうか？

末田さま
たとえば、検索条件を保持する、出力項目をユーザーごとに、という設定をするのに活用しています。これまでのシステムだと、一人の設定がシステム全体として引き継がれてしまうというケースがありました。Wijmoを利用すると、一定期間、個人の設定が保たれているのでありがたかったです。

飯尾さま
すべてのデータが欲しいという人と支払いのデータだけでいい、という人がいた場合、検索条件の設定をそれぞれのユーザーで個別に持てるんです。

末田さま
一覧表示の並び順も、お客さまによってはこだわりがあったりするので……。かつ、それが企業としての総意ではなく、一担当者のニーズだったりするのですが、そんな要望にも応えられます。この設定をWijmoを使わずに再現しようとすると、相当苦労すると思いますね。

―Wijmoを使用して開発した「ADMAN」の機能について、お客様の反応はいかがでしたか？

飯尾さま
先ほどご紹介した「フォーキャスト」「売上一覧」「検索条件切り替え」などの機能は、いずれもお客様から非常に好評をいただいています。とくにExcel出力については、「画面で確認した内容をそのままExcelで活用できるのは助かる」とのお声を多く頂戴しております。
フォーキャストは見込みデータを入力すると先の予測をグラフ表示できるため、「直感的に理解できる」といった反応をいただいています。売上一覧と原価一覧はエンドユーザーが抽出したデータを使えるというところで受けがいいです。自分たちが使いたいデータを抽出できるというのが、「まさに欲しい機能だった」と。

今後は帳票の刷新とペーパーレス化を推進

―「ADMAN」では今後、どのような展開をお考えでしょうか。

飯尾さま
今後は帳票化に力を入れようと思っています。データ集計している帳票をたくさん作っているのですが、いままでのものは古かったり動作が遅かったりするので、Wijmoを使って新しくしようと思っています。

末田さま
紙の帳票を使われているお客さまもいらっしゃるのですが、できるだけペーパーレス化に動きたいという思いもあります。

飯尾さま
コロナウイルスの影響で、ご自宅でお仕事をされる方も増えたので、画面上で見られるものや、PDFなどのデータで送れるものが望まれるという時代に変わってきていると感じます。

―最後に、Wijmoに対する機能追加や改善要望があればお願いします。

末田さま
UIの長さや幅の設定などが開発者に依存しないよう、ひとつのテンプレートから簡単に変換できる機能があるといいかなと思います。もしくは、ファイル同士を簡単に比較して、設定の違いをチェックできる機能もほしいです。現状では、人によって微妙に設定が異なることがあるんですよね。

飯尾さま
Wijmoはデザイナ上でサッと設定できるのが便利なんですが、できたものが要件通りに作られているかどうかを判断するのが大変なんですよね。簡単にファイルをチェックできる機能があったらいいですね。

―貴重なご意見をありがとうございます。ヘルプ上に「Wijmoデザイナ」があり、設定した内容をjsonファイルでダウンロードできますので、テンプレートとしてお使いいただけるかもしれません。ぜひお試しください。本日はありがとうございました。

取材協力：2025年9月