全体構成
今回から、実際のソースコードを見ながら解説していきます。
少しでも開発効率アップのお役に立てれば幸いです。
とにかく WEB サーバなしが大前提。デモンストレーションしたい内容をすべてブラウザ側だけで実現する必要があるので、今回は jQuery を使います。
ちょっとした動作（の模倣）のあるページを作るには jQuery はうってつけです。
フォルダ構成
１ページのためにずいぶんたくさんのファイルが必要なんだな、と思うかもしれません。
JS は機能ごとに分かれているので、対応するブロックが表示対象外なら読む必要はなくなります。
CSS は baseDefault.css と develop.css 以外はレイアウト、トンマナ各１を読み込みます。
今後たびたび モジュール という言葉を使いますが、このディレクトリ構造でいうと common と並列にある develop のことだと考えてください。
今回はサンプルのため、1 種類のモジュールしか出てきませんが、本来は
- クライアント向け管理画面の機能拡張するときに使う module01
- 既存の社内向け管理画面の機能拡張するときに使う module02
- 新規社内向け管理画面の機能拡張するときに使う module03
などが develop と並列に配置されているのが通常状態です。
ややこしいことに、大文字で始まる JS ファイルのことも モジュール と呼ぶ可能性があります。
こちらは可能な限り JS モジュール と呼ぶよう心がけますが。忘れた場合はご容赦ください。
(document root)
├ common ┬ img ─── transparent1x1.gif 縦横 1px の透明 GIF (ダミー画像)
│ ├ css ─── baseDefault.css HTML 各要素の基本的な指定
│ └ js ──┬ functions.js 大文字で始まる JS から呼ばれるちょっとした関数群
│ ├ definitions.js ページの定義やレイアウトの定義などをまとめたもの
│ ├ Breadcrumb.js 各ページに共通するパンくずリストを生成（実装途中）
│ ├ Global.js definisions.js の記述をもとに Global 変数を生成
│ ├ GotoTop.js ページスクロールしたときに右下に出現する Goto Top ボタン
│ ├ Headline.js Global 変数をもとにページタイトルや H1 の内容を生成
│ ├ Layout.js URL クエリなどをもとにページごとに必要な CSS を読み込む
│ ├ Menu.js Global 変数をもとにグローバルメニュー、サブメニューを生成
│ ├ Modal.js モーダルダイアログを生成
│ ├ Sort.js テーブルにソート機能を追加（未実装）
│ └ Swithcer.js レイアウト・トンマナの変更
├ develop ┬ img ┬ downArrow.svg 下向き矢印画像
│ │ └ user.svg 会員画像
│ ├ css ┬ baseDefault.css common/css/baseDefault.css のラッパー
│ │ ├ develop.css develop 内で共通の指定（baseDefault の値を上書き）
│ │ ├ leftRight.css レイアウト指定 左右
│ │ ├ upDownHorizontal.css レイアウト指定 左右
│ │ ├ upDownVertical.css レイアウト指定 上下
│ │ ├ upLeftRight.css レイアウト指定 上左右
│ │ ├ toneDefault.css トーンマナー指定グリーン
│ │ └ toneOrange.css トーンマナー指定オレンジ
│ ├ js ┬ SiteIdentifier.js 通常左上にあるサイトを示す画像などの部分を生成
│ │ ├ Membership.js 通常右上にある会員ログインフォームやログイン状態などを生成
│ │ └ Index.js ページ固有の動作を規定するスクリプト
│ └ index ─ index.html ページ本体
├────────────────── index.html 複数モジュールがある場合は全体のメニュー的な位置づけ
├────────────────── readme.md Git 管理しているのであるだけ、全く手つかず
├ bin ──────────── version.sh 各ファイルのバージョンを一斉に書き換えるためのスクリプト
└ .git Git 関連ファイル群
HTML
モック本体ともいうべき HTML ファイルの中身を見ていきます。
具体的には /develop/index/index.html です。
HTML ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex,nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" crossorigin="anonymous"
href="https://unpkg.com/sanitize.css@12.0.1/sanitize.css">
<script
type="text/javascript" crossorigin="anonymous"
src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>
dummyHtmlHeaderTitle<!-- Headline.js による挿入 -->
</title>
</head>
<body>
<header>
<nav id="moduleHeadline">
<span>
dummyHeadline1<!-- Headline.js による挿入 -->
</span>
</nav>
<nav id="siteIdentifier">
dummySiteIdentifier<!-- SiteIdentifier.js による挿入 -->
</nav>
<nav id="membership">
dummyMembership<!-- Membership.js による挿入 -->
</nav>
<nav id="globalMenu">
<ul class="globalMenuParent">
<li class="globalMenuChild" >
dummyGlobalMenu<!-- GlobalMenu.js による挿入 -->
</li>
</ul>
</nav>
<nav id="subMenu">
<ul class="subMenuParent">
<li class="subMenuChild">
dummySubMenu<!-- SubMenu.js による挿入 -->
</li>
</ul>
</nav>
<nav id="breadcrumb">
<ul class="breadcrumbParent" >
<li class="breadcrumbChild">
dummyBreadcrumb<!-- Breadcrumb.js による挿入 -->
</li>
</ul>
</nav>
<nav id="layoutSwitcher">
<ul class="layoutSwitcherParent">
<li class="layoutSwitcherChild">
layoutSwitcher<!-- LayoutSwitcher.js による挿入 -->
</li>
</ul>
</nav>
<nav id="gotoTop">
<ul>
<li>
gotoTop<!-- GotoTop.js による挿入 -->
</li>
</ul>
</nav>
</header>
<section id="wrapper">
<section id="console">
<h1 id="pageHeadline">
dummyConsoleHeadline1<!-- Headline.js による挿入 -->
</h1>
<p>
dummyConsoleParagraphH1<br>
</p>
<h2>
Control Panel
</h2>
<form id="consoleForm" method="get" action="/">
</form>
</section>
<section id="content" >
<table>
<caption>table caption</caption>
<thead>
<tr><th>table header 0</th>
<th>table header 1</th>
</tr>
</thead>
<tbody>
<tr><td>table cell 0-0</td>
<td>table cell 0-1</td>
</tr>
</table>
</section><!-- id="content" -->
</section><!-- id="wrapper" -->
<footer>
Copyright © XXX All rights reserved.
</footer>
</body>
</html>
ソースコード解説
最初に書いた通り、どのようなレイアウトになるかは全く考慮していません。
DOCTYPE 宣言、HTML タグ
特にコメントはありません。いたって普通の HTML5 です。
HEAD タグブロック
meta タグ 3 行は置いといて。
ここでは標準的なサニタイズ CSS と、jQuery を取り込んでいます。
title タグの中身も後から JS で追加します。
BODY タグブロック
大きく HEADER, WRAPPER, FOOTER に分かれます。
HEADER タグブロック
内容は Headline, siteIdentifier, membership, globalMenu, subMenu, breadcrumb, layoutSwitcher, gotoTop でいずれも NAV タグです。
下の2つは毛色が違いますが、基本的にページ遷移を伴うものが並んでいると考えてください。
- Headline 文字通り、このページの見出し
- siteIdentifier サイトを識別するロゴなど、よくサイト右上に表示されている部分
- membership 会員ログインフォームや、ログイン済みであればユーザー名などを表示する部分
- globalMenu いわゆるグローバルメニュー
- subMenu グローバルメニュー各要素の下位メニュー
- breadcrumb いわゆるパンくずリスト
- layoutSwitcher レイアウトおよびトンマナを変更するダイアログ
- gotoTop ページをスクロールし下方へ移動した際に、ページトップへ戻るためのアイコン
WRAPPER ブロック
内容は console, content で、いずれも SECTION タグです。
- console は、H1 タグと、content の内容を取得するためのフォーム要素を配置
- content は、console で選択された内容によって（本来なら）WEB サーバ上で生成されたコンテンツを表示
console 内には
H1 タグ、ページ内容やコンソールの使い方の説明、フォーム要素が並びます。
と書きながら、「H1 は console 内にあるのが正しいのだろうか」と疑問になりました。WRAPPER ブロック内の一番上に書かれるべき要素、だと思った結果、この位置になったのですが、そのうち console の外に出して、WRAPPER 部は H1, console, content の 3 本立てになるかもしれません。
content 内はページごとにバラバラなので一概にどうとも言いにくいのですが、このサンプルでは TABLE を一つ作っています。
FOOTER タグブロック
いまは copyright が 1 行あるだけですが、今後、この部分にもナビゲーション要素が入ってくる可能性はあるので、その場合は新たに definitions.js の拡張と、JS モジュールを作ることになりそうです。
ブラウザでの表示
この状態の HTML をブラウザで表示したものです。
まあなんというか、文字通り味もそっけもないです。逆にいうと雑味がなく調理しがいのある素材なのかもしれません。
今回は基本となる HTML の中身を見てきました。次回は「味もそっけもない」HTML に味をつける CSS を見ていきます。
再利用できるプレゼン用WEBページを作ろう 第１回
再利用できるプレゼン用WEBページを作ろう 第２回
再利用できるプレゼン用WEBページを作ろう 第３回