1. はじめに

AIMMearthは、WordPressによる一般Webサイトと、独自の衛星画像ビューアなど、複数のシステムを組み合わせて構成しています。

これらはそれぞれ独立した環境で動作していますが、利用者からは一つのWebサイトとして利用できるようにしています。

本記事では、システム間の連携方法と、それを実現している技術について説明します。

2. 独立したWebアプリケーションの構成

AIMMearthの衛星画像ビューアは、WordPressのプラグインとして開発したものではなく、HTML、CSS、JavaScriptなどを使用した独立したWebアプリケーションです。

ビューアはXServer VPS上で公開しており、WordPressを経由しなくても、Webブラウザからアクセスできる構成です。

一方、AIMMearthの一般Webサイトは、XServerスタンダード上のWordPressで管理しています。

このため、衛星画像ビューアの改修と、WordPressの記事・ページの編集を、それぞれ独立して行うことができます。

両者を連携させる際にも、一つのアプリケーションに統合する必要はありません。

3. iframeによる画面の統合

WordPressのページ内に衛星画像ビューアを表示するために使用しているのが、HTMLのiframeです。

iframeは、一つのWebページの中に、別のWebページを埋め込んで表示する仕組みです。

例えば、WordPressで作成したページ内にiframeを配置し、その表示先としてVPS上の衛星画像ビューアのURLを指定します。

利用者がWordPress側のページにアクセスすると、そのページ内にVPS側の衛星画像ビューアが表示されます。

この場合、ビューアを構成するHTML、CSS、JavaScriptは基本的にVPS側から読み込まれ、ブラウザ上で実行されます。

WordPressはビューアのプログラムそのものを実行しているわけではありません。

これにより、WordPress側のメニューやページ構成を利用しながら、独立した衛星画像ビューアを表示できます。

4. iframeとプログラム間連携の違い

ここで重要なのは、iframeによる画面の埋め込みと、システム間のデータ連携は別の仕組みだということです。

iframeは、別のWebページを表示するための機能です。

単にビューアを表示するだけであれば、WordPress側に複雑なPHPプログラムを追加する必要はありません。

一方、WordPressとビューアの間でデータを受け渡したり、利用者の認証情報を共有したりする場合には、別途JavaScriptによるメッセージ通信やAPIなどの仕組みが必要になることがあります。

つまり、AIMMearthのシステム統合では、連携する内容に応じて方法を区別することが重要です。

画面を表示するだけならiframeを利用し、データの受け渡しが必要な場合には、その目的に適した通信機能を使用することになります。

5. 衛星画像データの保存と配信

AIMMearthでは、衛星画像ビューアによる画像の閲覧に加え、衛星画像データそのものの提供も行います。

衛星画像のデータには、通常のWebページで使用する画像と比べて、大きなファイルサイズになるものがあります。

このため、Webサイトの管理を行うサーバーと、データファイルを保存・配信するサーバーを分離しています。

WordPress側では、商品の紹介、販売管理、購入者向けの案内などを扱う構成とし、ファイルの実体はVPS側に配置する方針です。

デジタル商品の販売管理には、WordPressのEasy Digital Downloads（EDD）を利用する計画です。

なお、商品の販売管理と、購入者が実際にデータをダウンロードする仕組みは別の機能です。

販売管理では、商品情報や購入記録、購入者の利用権限などを扱います。

一方、ファイル配信では、保存されたデータを利用者へ転送します。

両者を別のサーバーに配置する場合には、購入者の権限を確認した上で、適切なファイルを取得できるようにする連携が必要です。

この点は、単に外部ページを表示するiframeとは異なるシステム間連携になります。

6. システムを分離する利点

AIMMearthの構成では、各システムの役割が明確になっています。

WordPress側は、Webページや記事、商品情報などを管理します。

VPS側は、独自のWebアプリケーションと衛星画像データを扱います。

このように分離すると、一方のシステムを変更する際に、もう一方を大きく変更せずに済む場合が多くなります。

例えば、衛星画像ビューアの表示機能を追加する場合には、主としてVPS上のプログラムを改修します。

一方、技術紹介の記事やサイトのメニュー構成を変更する場合には、WordPress側で対応できます。

また、VPS側では必要に応じて新しいWebアプリケーションを追加することもできます。

7. AIMMearth全体のインテグレーション

AIMMearthでは、衛星画像の取得からWeb上での公開まで、多数の技術を組み合わせています。

衛星画像の取得にはCDSE、画像の加工にはPythonやQGIS・PyQGIS、Web上の表示にはHTML、CSS、JavaScriptなどを利用しています。

さらに、Linux、Apache、WordPress、DNS、iframeなどを組み合わせることで、加工したデータを利用者に提供するWebサービスを構成しています。

これらはそれぞれ独立した技術ですが、AIMMearthでは一連の処理として接続されています。

個々の技術の機能を理解するだけでなく、それぞれがシステム全体のどの部分を担当し、どのようにつながっているかを整理することが重要です。

8. まとめ

AIMMearthでは、WordPress、衛星画像ビューア、データ配信などを用途に応じて分離し、それらを必要な部分で連携させています。

画面の統合にはiframeを利用し、販売管理とファイル配信については、それぞれの役割を分離する方針です。

この構成によって、各システムの独立性を保ちながら、一つのWebサービスとして提供できます。

次回は、現在のシステム構成に至るまでに検討した方法や、制作過程で直面した問題について紹介します。

関連技術・キーワード： WordPress / iframe / HTML / CSS / JavaScript / Apache / XServer VPS / XServer Standard / Easy Digital Downloads / API / システム統合