静的ホームページへのウェブアプリケーション実装事例 – 閲覧ユーザーに有益なツールとUIを提供しよう

今回は、静的ウェブサイトに不動産物件情報を一覧表示させるウェブアプリケーションの開発、実装事例のご紹介です。少し前おきが長いですがご了承下さい。

「ホームページを業者に作成してもらったけれど、静的ホームページだから更新しにくく不便だなぁ」

「やっぱり投稿機能を持った管理しやすい動的ホームページが良かったんだけど、また一からリニューアルしないといけないのかな?」

とお思いの方おられませんか?

心配いりません。当オフィスであればこのようなお悩みを解決できます。

知ってました?実はウェブアプリケーション作成の技術があれば、一からホームページをリニューアルし直す必要はないんです。現状の静的ホームページにウェブアプリケーションを追加実装すれば良いんです。

まず静的ホームページとは何なのかから説明します。対義語に動的ホームページという言葉もあります。

まず、旧来のホームページは、ホームページ作成の基本的なコンピューター言語であるHTML言語(ハイパー・テキスト・マークアップ・ランゲージ)のみで作成されており、HTML言語はタグと呼ばれる命令をテキストエディタ等で記述して拡張子がhtml(またはhtm)のファイルを作成し、それをブラウザが1行ずつ読み込んで記述された命令通りの表示をするというものでした。

例えば、

<h1>これはタイトルです。</h1>

と、HTML言語で命令を記述したファイルを作成すると、ブラウザはその支指示を読み取り、そのとおりに画面上に表示してくれるわけです。

しかしこの場合、テキストエディタで記載し作成した内容は、ファイルをテキストエディタで編集し直す等しない限りは固定であり、決まった内容でしかなく、条件に応じた動的な表示はできませんでした。

これが、HTML言語で作成されたホームページは静的ページであるという理由です。

この静的ページの問題は、装飾やユーザーインタラクティブなユーザーの興味を引くようなページを作成できないばかりではなく、ブログ投稿やニュースリリース等のような定期的にコンテンツを追加したり、修正したりといった事が難しいという問題がありました。

そこで登場するのがASP(アプリケーション・サービス・プロバイダー)やワードプレスと言ったウェブアプリケーションです。

ASPとは例で説明すればわかりやすいかもしれません。わかりやすい例は、amebaやlivedoorブログ等のブログサイトです。

あのブログサイトは、使ったことがある方は分かるかもしれませんが、ログインして管理画面に入ると、ブログ作成のための設定や入力が可能となります。

本来であればブログ記事をテキストエディタでHTML形式のコードを用いて作成し、ブログを更新する際には、再びテキストエディタでファイルを開き追加編集してアップロードする等が必要なところ、あのようなインターネット上で作動するアプリケーションがあるおかげで、管理画面で簡単にブログを投稿し、保存したり、管理したりも自由にできるわけです。

つまり、ウェブ上のアプリケーションなわけです。

また、ワードプレスについても同じでありまして、サーバー上にワードプレスをインストールすることで、それ以降は、ウェブ上の管理画面にログインすれば、ブログサイト以上の高機能な編集機能を有し、ウェブ上で作動するブログ投稿システム(アプリケーション)として機能するのです。

ホームページによく備えてあるメールフォームですが、あれもウェブアプリケーションです。

このように、ウェブアプリケーションを導入することで、ウェブを閲覧するユーザーに有益なサービスをもたらすことができます。

自身が所有するホームページを頻繁に更新する必要がある場合は動的ホームページの導入を考えた方が良いのです。無料ブログサイト等のASPやワードプレスのような高機能な投稿機能を備えたCMS(コンテンツ・マネジメント・システム)の導入です。

つまり、動的ホームページとはウェブアプリケーション化されたホームページ管理システムと言っても良いでしょう。

冒頭のように、動的ホームページの導入を渋ったばかりに後から困ったことにならないためにも、本来は初めからよく仕様など検討のうえ、ホームページの製作依頼をして下さい。

でも、後からでもウェブアプリケーション技術者であれば、静的ホームページに動的コンテンツの実装を行うことは可能なんですよ!

当オフィスによる制作事例を紹介します。

別のブログ記事で当オフィス制作事例として紹介済みの(株)エスユーホームズ様のホームページですが、まさしく、今回のブログ記事の「困った」と同じ状況でした。

当初の打ち合わせでは、物件一覧の表示や管理機能は不要であり、ニュースリリースやブログ投稿等も不要の静的ホームページでのご依頼だったわけです。

それが納品間近になって、「やっぱり取扱い物件情報一覧を表示させたい」との要望がありまして、そこはやはりお客様ですし、物件情報を更新するたびに毎度手編集で記事投稿してね、とは言えないわけです。(^^;

方法論として、きちんとしたシステムを導入するのであれば、物件情報一覧ページのみワードプレスをインストールして作成するという方法があります。

実はワードプレスは我々開発者には優れたインターフェースとしての機能もありまして、外部ウェブアプリケーションからワードプレスにアクセスし、そのワードプレスで投稿したデータにアクセスし、投稿データ情報を取得、そして外部アプリケーション側でそのデータ、情報を使用するということも可能なのです。

つまり、既に作成していたメインの静的ホームページにウェブアプリケーションを埋め込むんです。

そのウェブアプリケーションの役割は、外部のワードプレスにアクセスして、ワードプレス上で投稿されたデータ(物件情報等)を取得、そのデータをメインのホームページ上に一覧表示させる、というもの。

ただ、既に納期を過ぎていたばかりでなく、上記方法論だと工数もさらにかさんでしまう。

そこで考えたのが、簡易的なCMS機能の実装です。この簡易CMS機能は以下のようなファイルシステム(ローカルファイルの読み書き)を用いた簡易的な仕組みでありまして、簡易的ではありますものの、お客様の負担は十分少なく、物件情報の更新作業ができるというものであります。

【(株)エスユーホームズウェブサイト、物件情報一覧表示用簡易CMS機能の概要】

1.物件情報はお客様の方でエクセルシートにご入力いただき、それをCSV形式のデータとして出力。

2.そのCSVデータをこちらが指定したサーバー上のフォルダにFTPアップロードしていただく。

3.当方でメインのホームページに埋め込んだウェブアプリケーションがそのCSVファイルからデータを読み取り、ホームページ上に物件情報を一覧表示させる。

トップページ物件一覧UI
トップページに表示される物件情報UI

個別物件一覧ページUI
物件一覧表示ページUI

https://www.office-tomo.net/wp-content/uploads/2021/05/簡易CMS機能説明書.pdf

実は、この程度の機能の実装でありましたらそんなには工数もかかりませんので、そんなにお高くはありません。是非一度お問い合わせください。

“静的ホームページへのウェブアプリケーション実装事例 – 閲覧ユーザーに有益なツールとUIを提供しよう” への1件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です