データ駆動Webサイトとは

記事
IT・テクノロジー
【以下ブログのとおり、現在作成途上です。了承のうえ下へお進みを】


はじめに

 本サービスで提供しようとしているデータ駆動Webサイトには、ざっくりいうと、方向性の異なる、以下の4つの機能を備えています。

 ① データ駆動
 ② 事前組み込み機能
 ③ アイコンイメージ管理機能
 ④ 既存htmlページ取り込み

① データ駆動

 データ駆動Webサイトでは、①の「データ駆動」という機能が中核にあります。このデータ駆動には、その振る舞いに対する概念、というか思想が別途あります。
(「データ駆動」について、詳しくは以下リンクをご参照ください)


② 事前組み込み機能

 また、どのようなサイトでもおそらく組み込むであろう、もしくは組み込むとしたらこのような仕組みが必要だ、などを予めJavaScriptやCSSにより実現し、組み込んでおいたもの。それが②の「事前組み込み機能」で、ヘッダ・メニュー・フッタ構成として、①の「データ駆動」と絡んだ形でひと通り稼働する仕組みとなっています。
(「事前組み込み機能」について、詳しくは以下リンクをご参照ください)
≪リンク準備中≫

③ アイコンイメージ管理機能 

 さらに、メニューその他で利用するアイコンイメージについても、svg(Scalable Vector Graphics)形式を主体とする登録データから制御する方式で、事前に登録済のsvgデータをメニューに簡単に紐付け可能な方式や、通知情報がある場合などのfaviconへのマーキング表示なども行える機能(③のアイコンイメージ管理機能)を内包します。

 メニューなどと連動するアイコンとして、svg以外も画像URLのデータ設定で(別途画像ファイル配置が必要)利用可能ですが、今後はsvg利用がおススメです。
(「アイコンイメージ管理機能」について、詳しくは以下リンクをご参照ください)
≪リンク準備中≫

 前述の①と②と③の相互連携しての機能実装により、ヘッダやメニュー、フッタなどを制御可能な状態として実現できています。

④ 既存htmlページ取り込み

 なお、ヘッダ・メニュー・フッタ構成と記載しましたが、フレームなどで別れた別ページではなく、メイン部分も含めひとつのページの中の該当部分を構成するもので、ページの表示の際は一枚のページとして表示されるものです。

 しかし、メイン部分における「データ駆動」の実現にはもう少し時間がかかることから、それを補うための代案として、④のメインページ部分への既存htmlページ取り込みを行う機能を付けることにしています。

 これにより、各コンテンツ部分は既存資産から流用しつつ、各ページの制御は、登録データにより設定された「データ駆動」と「事前組み込み機能」の連携により、さまざまな挙動が制御できる、という形が完成します。
(「既存htmlページ取り込み」について、詳しくは以下リンクをご参照ください)
≪リンク準備中≫

htmlページ取り込みによる波及効果

 ところで、考え方にもよりますが、このhtmlページを取り込むという機能は、多くのhtmlファイルで構成されたページを運用する方々にとって、以下のようなさまざまな視点からの大きな波及効果を秘めていることの気付きが得るに至りました。

┌─────────────────────────────────
│・既存htmlをほぼそのまま再利用可能(JS指定やCSS指定も継承)
│         ⬇️
│・既存htmlのメニュー等は排除可能(タグ指定で特定部分表示無効化)
│         ⬇️
│・メニュー等構成変化によるサイトデザイン一新(コンテンツ分離済)
│         ⬇️
│・コンテンツ部分に特化した変更が可能(htmlの全体構造を考慮不要)
│         ⬇️
│・コンテンツ文言変更程度ならhtml編集スキル低くとも可能
│         ⬇️
│・自身で変更可能ならば、外部への委託費用が0円に
│         ⬇️
│・変更要件に対する対応速度改善。変更頻度増大も可能に
│         ⬇️
│・コンテンツの外側意識不要より、自身による新規コンテンツ追加も容易
│         ⬇️
│・余計なコストもかからず、コンテンツはどんどん充実していける
└─────────────────────────────────

htmlページ取り込み。その具体的な効能

 例えば、商品を販売するなどでホームページを作成したいと考えるが、そのスキルがないから誰かに作成してもらうしかなく、大枚はたいて業者に依頼して作成したような方が、メニューなどの情報構成を変えたり、デザインを変えたり、などの場合、そう大きくない修正内容でも、またまた大枚をはたく必要があったと思います。かかる費用を鑑みて、コンテンツ更新を諦めたこともあったのではないでしょうか?

 html内にある、表示対象の文言のみを変更するだけならばそう難しい話ではありません。

 また、一塊の文章とそれに付随する僅かな数のhtmlタグ程度であれば、それらをひっくるめた形での編集も、慣れていくうちにおそらく可能となっていくでしょう。

 しかし、htmlに記述する、他のページへのリンクがまとめられたメニューや全体デザイン要素への影響を考えると、おいそれと修正するわけにはいかない状況もあります。

 そして、表示したいコンテンツのページの増減はそこにアクセスするためのメニューに影響してきますが、データ駆動の仕組みで管理されたメニューであれば、データの登録削除や文言変更、リンク変更も自在で、ダイナミックに変更することが可能になります。

 そうなると、コストもかけずに変幻自在なコンテンツ構成が作成可能となるため、いくらでもコンテンツは増殖可能となります。

 もちろん、メニューとして表示可能な量は、画面の表示面積により制限を受けることにはなりますが、メニュー自体もメインメニュー以外のツリー構造メニューも追加できるため、メニューのリンク項目は、ほぼ追加し放題になると思います。

 細かな情報は、上記のそれぞれのリンクの先をご参照ください。

まとめ

 ここまでの説明にてデータ駆動Webサイトに関する理解が深まることを期待するわけですが、おそらくまだまだ舌足らずな部分も多いかと思います。不備を見つけたなら、少しずつ改善していきますのでよろしくお願いいたします。(ココナラとこのブログについて、まだいろいろと仕組みがわかっていませんが、説明不備にお気づきになり、私宛にお伝えいただける手段がある場合は、気兼ねなくご指摘等いただけると幸いです)
サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら