スマートフォンサイト構築:ADOS誕生秘話

ADOS, 製品紹介, 開発・導入事例

こんにちは。ソリューション開発部の中川(01)と申します。

今回は、アークシステムで開発したマルチデバイス最適化サーバ「ADOS」について、書きたいと思います。稼動中のPC向けのWebシステムを利用して、スマートフォンサイトをリアルタイムに表示するツールです。参照だけでなく入力画面も対応してます。PCに向けにつくったWebサイトをスマートフォンに最適化させたい場合に有効なソリューションです。

ADOSの機能などは、こちらに記載しています。

ここでは、その開発を行った経緯などについて書きたいと思います。

プロジェクトのスタート

保険申し込みサイトのスマホ対応をしたいという案件の引き合いをいただきました。既存のPC向けWebサイトがあり、それはそのまま動かしを続けて、スマホ向けにレイアウトを最適化した画面を新たに作りたいという要件です。

  • 既存のPCサイトは別のベンダーが構築・運用保守を実施
  • スマホサイトはデザインは変えるが、機能的にはPCサイトと同一にする
  • なるべく早期に対応を終えたい

私たちは、PCサイトをスマホ向けに最適化したものに変換するツール、サービスを使ってこの件のソリューションを提供できると考えました。いくつかの製品・サービスを調査し、その中であるベンダーが提供しているスマホ変換サービスを選定して、それを使うご提案を行いました。

変換サービスを活用することにより、スマホ対応ページを最初から作成するより、以下のようなメリットが出ると考えました。

  • 既存のPCサイトには、基本的に手を入れる必要がなく、既に稼動しているPC向けサイトに影響を与えることがない
  • 変換サービスなので、ロジックの部分に手を入れることはなく、テストはビューの部分だけで済むので大幅にテストの工数が削減される
  • PC用、スマートフォン用のソースの二重管理をする必要がない

お客様にもこれらのメリットをご理解いただき、変換ツールを使ったプロジェクトがスタートしました。

プロジェクトでの課題

プロジェクトがスタートしてからしばらくすると、問題が出始めました。

当プロジェクトの要件に合わせ、ベンダー側で変換エンジンをカスタマイズし、その後テストで細かなところを修正するといった予定だったのですが、そのカスタマイズに時間がかかりました。

不具合も多く、特に複雑な画面については、要件に応えるのに苦労しており、ひとつの対応をすると今度は別の不具合が発生し、それを直すとまた元の不具合が発生するという状況でした。また、特定機種のみで発生する不具合もあり、それにも悩まされました。

ベンダーに確認などを行いましたが、以下のような状況でした。

  • カスタマイズしているのは変換ルール。変換ルールをカスタマイズしているが、それぞれの画面の複雑な要求を実装するのに苦労している
  • 海外で開発を行っているので、対応に時間がかかる。微妙なニュアンスが伝わらなかったり、不具合が発生する機種を開発元で保有しておらず、再現がうまくできないこともある
  • 対応内容が不明瞭。変換エンジンのカスタマイズの内容は、詳細は公表されず、対応が場当たり的なのではと感じられた

プロジェクトの方向変換(ADOSの誕生)

当初採用したサービスでは、柔軟性がなく、開発体制も不安でしたので、私たち自身で独自のツールを開発することを考えました。

採用したサービスでは、変換元のPCサイトにアクセスして、HTMLのデータを取得した後、変換エンジンが変換用のテンプレートを適用してスマホ用のサイトを作るという方法です。今回のプロジェクトでうまくいっていない点を留意して、私たちが開発するツールでは、少し方法を変えました。

まず、PCサイトのHTMLを解析してデータを取得する中継エンジンを作ります。スマホ用のJSPを個別で作り、データ取得は中継エンジンを使って、PCサイトからデータ取得をします。当初採用したツールのカスタマイズ方法で、「変換エンジンでスマホでの見せ方をコーディングする」というところに違和感があったので、私たちの中継エンジンはあくまで、PCサイトからデータを取得することに専念して、それをどうみせるかは、個別のJSPに委ねるかたちにしたのです。MVCの役割を本来の形にしたのです。

この方法では、多くの画面を一度にスマホ対応することができず、開発にやや時間がかかってしまうのですが、当プロジェクトにおいては、スマホ用の画面のひとつひとつをデザインから作り、それぞれの複雑度が高めなので、変換用テンプレートにすべて適合させることが難しく、逆にこの方法がよいと考えました。JSPをひとつずつ作ってそのデータの取得元だけはPCサイトのHTMLから取得するという方法にしたのです。

この方法では、これまで悩んでいた複雑な画面の要求や特定機種のみに発生する不具合も、JSPに実装すればいいので、対応することができます。

私たちの開発したものは、変換ツールというより、中継サービスと呼んだほうがしっくり来る感じです。

プロジェクトの完了

私たちの中継サービスを用いて、プロジェクトの方向修正をするという案について、お客様にご承認いただき、この方法でプロジェクトを再スタートしました。

いろいろな苦労はありましたが、私たちの中継サービスを使った方法で再スタートしてから、約3ヵ月後、約70画面のスマホサイトを完成させることができました。紆余曲折はありましたが、結果的には、当初狙っていた”変換”だからできる短期間の構築が実現できたのだと思います。

こうして、私たちが開発したPCサイトスマートフォンサイト中継サービスを使ったPCサイトのスマホ対応プロジェクトはサービスインし、その後もいくつかの追加対応を行いましたが、この仕組みで今日もスマートフォンからの保険申し込みを受け付けています。

PCとスマホで見比べてみてください!

PCサイトとスマホ(スマートフォン)サイトの比較
ジェイアイ傷害火災保険株式会社様 海外旅行保険 t@bihoたびほ

おわりに

別の案件でもこの中継サービスを使ったソリューションを行い、いくつかの機能追加を行って、中継サービスからマルチデバイス最適化サーバと改め、ADOS(ARK Device Optimization Server / エイドス)と名づけました。実は、スマホ対応されていなかった自社サイトなども、このADOSを使って、スマホ最適化を行いました。

このような経緯で生まれたADOSの特徴は、

  • 複雑な変換要求にも対応可能な仕組みになっています。このプロジェクトで対応した保険申し込みサイトはかなり複雑度高く、これより難しいスマートフォン変換の案件はなかなか無いかなと思っております!これに対応した実績が私たちの自信となっています
  • 変換エンジンは、あくまで部品。ASPのようなサービス提供型でなく、ソリューションの一環として、弊社が請け負ったプロジェクトとして納品する
  • 配置先もクラウドから、オンプレまでお客様次第。基本的にはJavaで作成されたWebシステムなので、tomcat が稼動すればよいので、特別なインストール要件はない
  • 既存のPCサイトに影響を与えることはなく、ロジックの部分に手を入れることはないため、テストはビューの部分だけで済み大幅にテストの工数が削減される。変換ツールと同様のメリットがある

既存のツールで変換できるほど単純なサイトではなく、それなりに複雑なシステムサイトに最適なソリューションを提供できるのではと思っております。

ADOSでスマホ対応を!

ご興味あるかたは、ぜひ お問い合わせ ください。

  • 株式会社アークシステムの来訪管理・会議室予約システム BRoomHubs
  • 低コスト・短納期で提供するまるごとおまかせZabbix