データ駆動Webサイトの導入にまつわる資料のブログ移行
商品説明用資料として、ぎちぎちのまとめ画像を添付していましたが、特にスマホなどでは大変見えづらいと思えることと、それでは詳細な説明が参照しにくいこと、説明領域が不足すること、などのさまざまな理由から、ブログにて、可能な限り、詳細情報を提示したく、こちらに転記したものです。
※ただし、ココナラブログの表現力は大変乏しいので、ひとまず元説明の部分画像掲載としています。
リンク情報等
対象となる提供商品・サービスはこのページ末尾にリンクを置きますので、必要に応じてご参照ください。
ここでは、「データ駆動Webサイト」の導入に関する『初期コンテンツの追加導入ダイヤグラム』③初期コンテンツ環境構築の説明資料となります。
以下のリンク先のブログ情報：補足説明と合わせてお読みください。
前回①②のサーバ環境構築・AP配備とDB構築に戻る場合は以下から。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
コンテンツ環境の構築
前回までは、サーバの各種構築作業でしたが、ここからはコンテンツまわりの環境構築となります。
例えば、htmlファイルを作成して、Webサーバにftpでアップロードする、という作業がありますが、システム全体のファイル群を転送する、というだけでなく、メインコンテンツとなるhtmlファイルを取り込む（単なる配置作業ではない）という部分のやや特殊な作業を行います。
システムが認識できるよう、DBへのデータ登録により紐付けたりの作業も含まれるため、手放しで購入者自身が作業できるか、というとや少々困難かもしれない場面となります。
この作業については、依頼されることをお勧めしますが、今後のためにも、一緒に見てもらいながらの作業を行い、次からはご自身で作業可能となるように慣れていただくと、将来、コンテンツを追加する場合などに費用が発生することなくHP構成や内容を変化させていくことが可能となります。
もちろん、このようなシステムの扱いに長けたエンジニアを抱える場合など、ご依頼いただかずにご自身の手で設定を行われても問題ありません。
≪③初期コンテンツ環境構築：画像㊤≫
≪③初期コンテンツ環境構築：画像㊥≫
ここまでの作業が完了すれば、Webサイトは完全稼働します。
DBデータの扱い方がわかってくると、必要に応じて、メニューの構成や文言などを調整することも即座に実現できるようになります。
≪※6.本APコンテンツ制御機能等：画像≫
≪③初期コンテンツ環境構築：画像㊦①≫
上図の左半分は、HPのコンテンツの表示領域ごとの役割などを表しています。この場合のヘッダ、メニュー、フッタに関しては、基本的にDBデータにより構成していきます。（データドリブンの仕組みにより）
白地のコンテンツと書かれた部分が、メインの内容を表示する部分となりますが、こちらもデータドリブンにて制御したい部分ですが、現在は開発途上のため、代わりに外部のhtmlファイルを読み込ませる、という手法にて、HPを構成する仕様となっています。
ただし、ちょっと表現が難しいですが、そのhtmlファイルを読み込み表示する、というのはありません。表示されているのは、もちろんhtml化されたものですが、htmlファイルが表示されるのではなく、JavaのServletが対応表示するものです。
元となるhtmlファイルの中身からbodyの部分だけを取り込み、関連するcssやJavaScriptなどの参照も拾い出して、新しいページ構成で再構築するものです。このため、読み込むhtmlファイルにはヘッダやメニュー、フッタなどの記述は不要となります。
その辺りについて、詳しくは、別のブログ：「データ駆動Webサイト」をご参照いただき、ここでの詳細説明は割愛いたします。
≪③初期コンテンツ環境構築：画像㊦②≫
上図は、アイコンやタイトルに関する説明をしています。
普通にメニューなどには、標準的に、メニュー文言にアイコンを添えることができる仕様としていますが、それ以外に、いわゆるfaviconという、タイトルバーなどに表示されるアイコンとタイトルの制御について、その表示例を示しています。
まずタイトルでは、サイトとしての名称と、その中の各ページの名称がそれぞれあると思いますが、メニュー込みのトータルの表示をする場合、DBデータとして、各ページに対する表示の仕方を指定することにより、サイト名、ページ名の組み合わせ、その表示形式などが制御されます。
アイコンについては、やや特殊です。メニュー等で使用されるために、既にDBデータにsvg情報が登録済のアイコンがあり、その範囲のアイコン画像でよければ、データで指定するだけでメニューに付加表示される仕組みを持っています。
まず、このsvgアイコンでなくても、pngなどの画像ファイルがあれば、それを紐付けることも可能です。
またご存じかどうかはわかりませんが、svgファイルはxml構造でありながら、表示する時にコンテンツからスクリプトなどによる内容が難しい特性があります。（cssを利用することで一部のみ属性変更可能とする技はあります）
これについて、本システムでは根本から変更可能な仕組みを持っています。これにより、ひとまず塗色や線色、線幅等、５つの属性をデータから変更可能としています。これにより、同じアイコンでも色や特徴を変えた表示が可能となっています。
さらには、通知という仕組みのために、アイコンに円などの図形付加とその中に数字やアルファベットなどの１文字を付加した描画や、そのサイズなどを細かく調整したsvg出力が可能となっています。
そして、それはメニューなどのアイコンだけでなく、faviconなどのタイトルとともに表示されるアイコンにおいても、アイコンを変更できるだけでなく、通知情報を付加することができます。
ただし、faviconなどのアイコンの場合、サイズが小さいため、表示はできても文字などの識別可能な大きさでの表示はやや難しいため、この場合は円などの図形表示のみとしたほうがよさそうです。
さらにこのfaviconなどのアイコンとしては、縦横のサイズが正方形となってしまうことから余計に付加文字の表示は難しいと思いますが、メニューなどのアイコンの場合、横幅を拡げた表示が可能であるため、元のアイコンを十分認識可能な状態としたうえで、横に広げた領域に文字付のマークを表示する、ということも可能となっています。
というような、アイコンを使ったさまざまな表現も可能となっています。
特にfaviconとしてのアイコン部分での通知機能の利用は、大変効果のある表現が可能なため、今後のWebサイトの世界では重宝される機能となるのではないかと期待しています。
続けて④に進まれる場合は、以下のリンクからどうぞ。
対象の提供商品・サービス
このページにて説明している情報の対象とする提供商品・サービスはこちらです。
