企業Webサイト運営6つのトレンド(5) APIセントリックなWebサイトという考え方

WebアプリケーションやWebサービスを設計するとき、全体を一つのものとして設計するのではなく、おおまかな部品に分解して設計することがよくあります。

一つ一つの部品をそれぞれ独立して設計し、部品と部品を分離させてネットワークでつなぐことで、システムが大きくなり過ぎないようにしたり、それぞれの開発を分担したりすることができるなどのメリットがあるからです。

最近では、マイクロサービスアーキテクチャーのように、部品をできるだけ小さくすることで、それぞれの部品の影響範囲を小さくし、開発のスピードを高め、機能改善を行いやすくする手法が広く使われています。

この手法をWebサイトに応用するとどうなるでしょう。

Webサイトのフロントエンドとバックエンドを分離

Webサイトの場合、おおまかに考えると、HTMLやCSSといったルックアンドフィールに関わる部分と、実際の情報の中身であるコンテンツに分離することができます。あるいは、フロントエンドとバックエンドにも分けて考えることが可能です。

一般的なWebサイトではMovable TypeやWordPressといったWeb CMSが多く利用されていますが、この場合、サーバーサイドのデータベースに保存されたコンテンツを、テンプレートエンジンを通して、そのコンテンツが含まれた形のHTMLやCSSを生成して構成されています。

最近では、動きのあるWebサイトや、高度なUXを持つWebサイトが増えてきています。こういった場合は、フロントエンドのHTMLやCSS以外にJavaScriptなどを用いてWebブラウザ上でさまざまな処理を行っています。以下のような構成です。

このようなサイトでは、コンテンツをベースにしたテンプレートエンジンだけを使ってWebサイトを構成すると、とても大きなシステムになってしまいます。作るのも大変ですし、変更するのも大掛かりになってしまいます。

そのようなことを防ぐべく、フロントエンドとバックエンドを分離するために用いるのが API です。言ってみれば、WebCMS をバックエンドにして API を利用したWebサービスを作るようなものです。API セントリック(中心)なWebサイトといってもいいでしょう。

分離によりフロントエンドの改修が迅速に

APIを利用してフロントエンドとバックエンドを分離することのメリットは、作りやすさやメンテナンスのしやすさだけではありません。

今Webサイトを作るとなると、アクセスの大半を占めるスマートフォンサイトは欠かせませんが、PCサイトにも根強い需要があります。さらに、ブラウザではなく、専用のスマートフォンアプリを利用することも増えてきました。

このようにフロントエンド側では、さまざまな新しいデバイスが作られ、更新が求められるため、バックエンドと分離しておくことで、開発のコストやスピードを大幅に削減できるのです。

分離によりCMSのアップデートも柔軟に

一方、コンテンツを管理するWebCMSにもメリットがあります。WebCMSは、日々、新しい機能を取り入れ、バージョンアップしています。また、どうしても避けられないセキュリティ脆弱性への対応のため、アップデートが必要な場合があります。

その際、作成するWebサイトへの影響が小さければ小さいほど、迅速なアップデートにも対応できるようになるのです。また、APIを利用することで、WebCMS自体のインタフェースもさまざまなフロントエンドに対応することが容易になるのです。

Movable Typeではこのような動きを先取りし、早くからData APIを整備してきました。今では、ほとんどのコンテンツをREST/JSON形式のAPIから操作できるようになっています。

iOS向けアプリの提供を開始した際に、アプリを作成するために利用しているライブラリも公開していますので、ユーザーが独自のアプリケーションを作ることも比較的容易になっています。Movable Typeクラウド版では、Data APIのデータキャッシュによる高速化もサーバ側に組み込んで提供しています。また、APIを変更しないよう、互換性にはとても気を使っています。

例えば、シックス・アパートのコーポレートサイトでは、Movable Typeなどの製品・サービスを使用してサイトの構築などを行う全国約300社のパートナーの一覧を掲載しています。その中からお客様が希望のパートナーを地域や得意なソフトウェア、実績のある分野で絞り込んで探すことができる機能をData APIを使って実装しています。