こんにちは!ソリューション開発部の細田です。

本記事では弊社で提供しているソリューションのひとつであるADOSについて少し深く知ってもらうことを目的としております。

ADOSって何?何ができるの?何ができないの?と言った疑問が少しでも解消できれば幸いです。

ADOSとは何か?

ADOS (ARK Device Optimization Server)とは、WEBシステムのインターフェイスを様々に最適化するシステムです。
最適化とはなにをするのかといえば、UIをそれぞれのデバイス向けに見やすい形にすることを主な目的としています。

昨今はレスポンシブデザインと言うものも出てきましたが、なかなか古いサイトを置き換えるのは大変だと思います。しかしながら今やスマホの台頭で「PCではなかなか見てもらえない、訪問者のほとんどがスマホから」という状況もあるかと思います。

そこで出てくるのがADOSです。
PCサイトをそのまま(一部制限があります)にデザインだけスマホ向けにということが出来るのです!

詳しくは弊社HPに記載がありますのでご覧下さい。

PC向けWebシステムをリアルタイムでスマートフォン対応PC向けWebシステムをリアルタイムでスマートフォン対応

ここでは「少し深く」ということで、どういった仕組みでADOSが稼働しているのかを説明していきたいと思います。

技術者向けにADOSを一言で言えばUI変換Proxyと言えるかもしれません。
例えばADOSがあるPCサイトのUIをスマホサイトに最適化する際のフローを示します。

ここからの例ではPCサイトを変換するシチュエーションで記載します。

処理シーケンス

図1: 処理シーケンス

ユーザーからのアクセスフローを表すと上記の図1のようになります。

  1. ユーザーがADOSサーバーにアクセスするとADOSサーバーはPCサイトにリクエストを送ります。
    このリクエストはHTTP(S)リクエストで、ブラウザから送信されるリクエストと同じです。
    PCサイトから見ればADOSサーバーは数あるブラウザのひとつに見えます。
  2. リクエストを受け取ったWEBサイトはブラウザに送信するようにADOSにHTMLを送信します。
  3. HTMLを受信したADOSサーバーはHTMLを解析し、スマホ向けのHTMLに再構築します。
  4. ユーザーはADOSで最適化されたスマホ向けのHTMLを受信します。

このように、ADOSはPCサイトとユーザーの間に入って最適化を行っていますので、PCサイトのロジックには影響を与えません。また、ユーザーのデータやビジネスロジックを持たないため、ロジックの違いによる問題がなくなります。

どういった方式で最適化を行っているか

ADOSはUIを自由に作れることを目指しているため、自動変換は行いません。
そのため、ひとつひとつを指定して配置を決める必要があります。

以下の様にWEBサイトから取得した要素(タグ)をどのように配置するかを最適化ルールとして記載します。
通常のサイトで言えばDBから取得すべきデータをWEBサイトのHTMLから取得しているイメージです。

セレクタで取得し配置を決定する

図2:セレクタで取得し配置を決定する
左:セレクタを記載したHTMLテンプレート 右:データが取得され展開されたHTML

実際の取得の仕方は図2のようにセレクタを利用してHTMLから取得するデータを特定しており、idやクラス、タグ名などを指定しています。

そして、指定されたセレクタに対応するPCのHTMLが取得され、あらかじめ作成しておいたデザインの枠組みの中に埋め込まれていくことで最適化したHTMLが作成されるという手法です。

このようにデータソースとなるPCサイトからデータを取得していますのでビジネスロジックなどはありません。

ある特殊な金額の計算方法が変わる場合でも修正不要ですし、個人情報などもデータとして持っているわけではないため安心して使うことが出来ます。

制限事項

その特性上制限もあり、特に気を使わなければならない点については以下のとおりです。

パス、もしくはドメインの違いによる挙動の違い

たとえば、PCサイトのアプリケーションルートが /pc/ であり、
ADOSで作成したサイトが /sp/ だった場合を考えてみます。

PCサイトであるリンクがクリックされる場合の遷移先が
 /pc/nextview1
とするとスマホサイトでは
 /sp/nextview1
としなくてはなりません。

HTMLにあるaタグなどはその差異を吸収する仕組みとなっていますが、JavascriptについてはPCサイトから提供されるものをそのまま使うことを想定しているため、デフォルトの動作では「/pc/nextview1」に遷移してしまいます。

JavascriptもADOSを通すように変更すればパス変換することができます。

外部連携

次に外部連携ですが、この部分は非常に問題が起きやすいといえます。

特にリダイレクト処理などは気を遣う必要があります。

外部連携では戻り先がPCサイトになっており、そこからUserAgentで判断してスマホサイトへリダイレクトするケースがよくあると思います。 このときに外部連携からパラメータが渡ってきているとすると、そのパラメータ含めスマホサイトへ渡さなければなりません。この部分が正しく設計されていないと値が抜け落ちてしまい想定した動きにならない事があります。

PCサイトはそもそもADOSが存在しない前提で作られていますし、外部との連携は管理者が他社であったりしますので、影響を見落としやすく注意が必要です。

最後に

ADOSの仕組みと注意点について解説してまいりましたが、ここまで読んで頂けた方ならこの仕組みがスマホだけでなく様々なデバイスに利用できることもご理解いただけていると思います。

既存システムのUIだけを変えたいと思うことがあれば是非思い出していただければ幸いです。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter で「株式会社アークシステム」をフォローしよう!

ADOSのちょっと深い記事https://devlog.arksystems.co.jp/wp-content/uploads/2017/06/1258472-1200x630.jpghttps://devlog.arksystems.co.jp/wp-content/uploads/2017/06/1258472-150x150.jpghosodaADOSソリューション開発部製品紹介Webシステム,スマートフォン対応,スマートフォン変換,ADOSこんにちは!ソリューション開発部の細田です。 本記事では弊社で提供しているソリューションのひとつであるADOSについて少し深く知ってもらうことを目的としております。 ADOSって何?何ができるの?何ができないの?と言った疑問が少しでも解消できれば幸いです。 ADOSとは何か? ADOS (ARK Device Optimization Server)とは、WEBシステムのインターフェイスを様々に最適化するシステムです。 最適化とはなにをするのかといえば、UIをそれぞれのデバイス向けに見やすい形にすることを主な目的としています。 昨今はレスポンシブデザインと言うものも出てきましたが、なかなか古いサイトを置き換えるのは大変だと思います。しかしながら今やスマホの台頭で「PCではなかなか見てもらえない、訪問者のほとんどがスマホから」という状況もあるかと思います。 そこで出てくるのがADOSです。 PCサイトをそのまま(一部制限があります)にデザインだけスマホ向けにということが出来るのです! 詳しくは弊社HPに記載がありますのでご覧下さい。ここでは「少し深く」ということで、どういった仕組みでADOSが稼働しているのかを説明していきたいと思います。 技術者向けにADOSを一言で言えばUI変換Proxyと言えるかもしれません。 例えばADOSがあるPCサイトのUIをスマホサイトに最適化する際のフローを示します。 ここからの例ではPCサイトを変換するシチュエーションで記載します。図1: 処理シーケンス ユーザーからのアクセスフローを表すと上記の図1のようになります。ユーザーがADOSサーバーにアクセスするとADOSサーバーはPCサイトにリクエストを送ります。 このリクエストはHTTP(S)リクエストで、ブラウザから送信されるリクエストと同じです。 PCサイトから見ればADOSサーバーは数あるブラウザのひとつに見えます。 リクエストを受け取ったWEBサイトはブラウザに送信するようにADOSにHTMLを送信します。 HTMLを受信したADOSサーバーはHTMLを解析し、スマホ向けのHTMLに再構築します。 ユーザーはADOSで最適化されたスマホ向けのHTMLを受信します。このように、ADOSはPCサイトとユーザーの間に入って最適化を行っていますので、PCサイトのロジックには影響を与えません。また、ユーザーのデータやビジネスロジックを持たないため、ロジックの違いによる問題がなくなります。 どういった方式で最適化を行っているか ADOSはUIを自由に作れることを目指しているため、自動変換は行いません。 そのため、ひとつひとつを指定して配置を決める必要があります。 以下の様にWEBサイトから取得した要素(タグ)をどのように配置するかを最適化ルールとして記載します。 通常のサイトで言えばDBから取得すべきデータをWEBサイトのHTMLから取得しているイメージです。図2:セレクタで取得し配置を決定する 左:セレクタを記載したHTMLテンプレート 右:データが取得され展開されたHTML 実際の取得の仕方は図2のようにセレクタを利用してHTMLから取得するデータを特定しており、idやクラス、タグ名などを指定しています。 そして、指定されたセレクタに対応するPCのHTMLが取得され、あらかじめ作成しておいたデザインの枠組みの中に埋め込まれていくことで最適化したHTMLが作成されるという手法です。 このようにデータソースとなるPCサイトからデータを取得していますのでビジネスロジックなどはありません。 ある特殊な金額の計算方法が変わる場合でも修正不要ですし、個人情報などもデータとして持っているわけではないため安心して使うことが出来ます。 制限事項 その特性上制限もあり、特に気を使わなければならない点については以下のとおりです。 パス、もしくはドメインの違いによる挙動の違い たとえば、PCサイトのアプリケーションルートが /pc/ であり、 ADOSで作成したサイトが /sp/ だった場合を考えてみます。 PCサイトであるリンクがクリックされる場合の遷移先が  /pc/nextview1 とするとスマホサイトでは  /sp/nextview1 としなくてはなりません。 HTMLにあるaタグなどはその差異を吸収する仕組みとなっていますが、JavascriptについてはPCサイトから提供されるものをそのまま使うことを想定しているため、デフォルトの動作では「/pc/nextview1」に遷移してしまいます。 JavascriptもADOSを通すように変更すればパス変換することができます。 外部連携 次に外部連携ですが、この部分は非常に問題が起きやすいといえます。 特にリダイレクト処理などは気を遣う必要があります。 外部連携では戻り先がPCサイトになっており、そこからUserAgentで判断してスマホサイトへリダイレクトするケースがよくあると思います。 このときに外部連携からパラメータが渡ってきているとすると、そのパラメータ含めスマホサイトへ渡さなければなりません。この部分が正しく設計されていないと値が抜け落ちてしまい想定した動きにならない事があります。 PCサイトはそもそもADOSが存在しない前提で作られていますし、外部との連携は管理者が他社であったりしますので、影響を見落としやすく注意が必要です。 最後に ADOSの仕組みと注意点について解説してまいりましたが、ここまで読んで頂けた方ならこの仕組みがスマホだけでなく様々なデバイスに利用できることもご理解いただけていると思います。 既存システムのUIだけを変えたいと思うことがあれば是非思い出していただければ幸いです。ARK Solution Development Division Developers Blog.