WebサイトのしくみとCMSの役割

2024-07-27 第一版
サイトブリッジ株式会社

目次■Webサイトのしくみ
画面に情報を表示する3種類のしくみ
HTML、CSS、JavaScript

HTMLのコードCSSのコード
JavaScriptのコード
ページ間のリンク
Webサイトの構成
Webページの構成
CMSの構成■JoruriCMSについて
JoruriCMS2020がページを生成するしくみ
HTMLの枠組み
記事作成画面
JoruriCMS2020のコンテンツの役割
レイアウトの管理画面
レイアウトのHTML
記事ページの公開画面
ピース一覧
コンテンツとピースの関係
JoruriCMS2020の管理画面メニュー

画面に情報を表示する3種類のしくみ
次の3種類のしくみについて、その違いを説明します。
・デスクトップアプリケーション・スマートフォンアプリケーション（狭義のクライアントサーバー方式）
・Webシステム（ホームページ）■デスクトップアプリケーション
・PCにソフトウェアをインストールし、PC単独で動作するシステム。
・マイクロソフトのオフィス（ワードやエクセルなど）のようなソフトウェア。
・ソフトウェアをインストールしているPCでのみ操作が行える。

ワードエクセルデータ
PC■スマートフォンアプリケーション・スマートフォンにソフトウェアをインストール。
・サーバーと通信し、データなどを取得。
・入力したデータは、サーバーに格納。
・ソフトウェアをインストールしているスマートフォンのみで使える。
・データはサーバーに保存されているため、複数のスマートフォンで利用可能。
・PCの場合、Reactなどで開発されたRIA（rich internet application）がこの方法に該当する。

Web
システム

アプリ
スマートフォン

データ

サーバー■Webシステム・PCまたはスマートフォンのブラウザーで画面を表示。
・専用のアプリケーションをインストールしない。
・データはサーバーから取得。
・ブラウザーがインストールされていると、どのような端末からでも閲覧が可能。
・ブラウザーが表示できるHTML、CSS、JavaScriptで画面を作成する。

ブラウザー

PC

Web
システム

データ

サーバー

-1-

HTML、CSS、JavaScript
Webサイトは、PCやスマートフォンのブラウザーで画面を表示します。
ブラウザーで画面を表示するために、ブラウザーの規約に沿ったデータをサーバーから送ります。
HTML、CSS、JavaScriptで画面を作成すると、ブラウザーで表示できます。

■HTML・HTML（Hyper Text Markup Language）の略称。
・HTMLはデータ処理ができないため、プログラミング言語ではない。
・マークアップとは、文書の構造を正しく認識できるように、文書の要素にタグを付けること。
・文書の要素とは、「タイトル」、「見出し」、「段落」など。
タグの例<title>ページのタイトル</title><h1>大見出し</h1><p>段落</p>■CSS・(Cascading Style Sheets）の略称。
・cascadeとは、次々の連なった、直列という意味。
・CSSは文書を構造化するわけではないので、マークアップ言語ではない。
・CSSはスタイルシート言語である。
・CSSはHTMLで構造化された文書の表示形式（スタイル）をしている言語である。
・カスケーディングとは、要素に対する宣言が複数存在する場合、優先順を決めて、ひとつの宣言を有効にするしくみ。

div{
font-size:20px;}

div セレクタ
font-size プロパティ 20px プロパティ値■JavaScript
・Webブラウザ上で動作するプログラミング言語の一つ
・Webページを更新せずに、ユーザのアクションに反応を返すことができる。
・HTMLやCSSと組み合わせて使うことで、ブラウザ上でアニメーションを動作させることができる。
・豊富なライブラリやフレームワークが存在し、これにより開発がより効率的になる。
div.addEventListener(‘click’, () => { divをクリックすると、次の動作する
alert(‘サイトを移動します’);「サイトを移動します」というポップアップを表示});-2-

HTMLのコードHTMLのコードとブラウザーでの表示を説明します。
メモ帳にHTMLを記述し、ファイル（sample.html）として保存します。
ファイルをブラウザー（Chrome）で開き、表示を確認します。
aタグは、anchor（アンカー）を省略したものです。
hrefは、hypertext reference（ハイパーテキスト・リファレンス）の省略です。
<!doctype html>
utf-8 unicode transformation format 文字コードの種類<html lang="ja"><head><meta charset="utf-8" /><title>サンプルページ</title></head><body><a href="https://zomeki-creators-club.jp/">
ZOMEKIクリエイターズ倶楽部サイト</a>aanchor（アンカー）の略</body>href
hypertext reference（ハイパーテキスト・リファレンス）</html>Google Chromeのデフォルト設定
未訪問リンク (unvisited links)
色: 青色 (#0000EE)
下線: あり (text-decoration: underline)
訪問済みリンク (visited links)
色: 紫色 (#551A8B)
下線: あり (text-decoration: underline)-3-

CSSのコード（HTMLファイルに記述）
CSSのコードとブラウザーでの表示を説明します。
HTMLに<style>タグを追加して、CSSを記述します。
aタグに対して、 font-size(文字の大きさ)とborder(線)を指定します。
<!doctype html><html lang="ja"><head><meta charset="utf-8" /><title>サンプルページ</title><style><style>タグを配置し、HTMLの中にcssを記載する
a{font-size: 20px;
border: 1px solid red;}
文字サイズが20px</style>1pxの直線の赤い線を付ける</head><body><a href="https://zomeki-creators-club.jp/">
ZOMEKIクリエイターズ倶楽部サイト</a></body></html>Google Chromeのデフォルト設定
フォントのサイズ：16px-4-

CSSのコード（CSSファイルを読み込む）
CSSは基本的に、HTMLとは別にファイルを作成し、そのファイルをHTMLに読み込んで使用します。
メモ帳にCSSを記述し、ファイル（sample.css）として保存します。
HTMLでsample.cssファイルを読み込み、HTMLファイルをブラウザー（Chrome）で開き、表示を確認します。
■HTML<!doctype html><html lang="ja"><head><meta charset="utf-8" /><title>サンプルページ</title><link rel="stylesheet" href="./sample.css"></head><body><a href="https://zomeki-creators-club.jp/">
ZOMEKIクリエイターズ倶楽部サイト</a></body></html><link>タグでCSSファイルを読み込む
rel=“stylesheet“
リンク先の文書はstylesheetである
href=“./sample.css”
HTMLファイルと同じ階層のsample.cssを読み込む■CSS(sample.css)

utf-8 unicode transformation format@charset "utf-8";a{
文字サイズが20px
font-size: 20px;
border: 1px solid red;
1pxの直線の赤い線を付ける}

文字コードの種類-5-

JavaScriptのコード（HTMLファイルに記述）
JavaScriptのコードとブラウザーでの表示を説明します。
HTMLに<script>タグを追加して、JavaScriptを記述します。
aタグをクリックすると、「外部サイトにアクセスします。よろしいですか？」というポップアップが表示されるように指定します。

<!doctype html><html lang="ja"><head><meta charset="utf-8" /><title>サンプルページ</title></head><body><script>を使うことで、HTMLの中<a id="link" href="https://zomeki-creators-club.jp/">にJavaScriptを記載できる
ZOMEKIクリエイターズ倶楽部サイト</a>HTMLのid=“link”をJavaScriptのlinkと<script>して定義する
const link = document.getElementById('link');
link.addEventListener('click', () => {alert(‘外部サイトに移動します。よろしいですか？');「link」をクリックしたら、次});の動作をする</script>
Alert(‘’)の内容をポップアップに表示</body></html>-6-JavaScriptのコード（JavaScriptファイルを読み込む）
JavaScriptは基本的に、HTMLとは別にファイルを作成し、そのファイルをHTMLに読み込んで使用します。
メモ帳にJavaScriptを記述し、ファイル（sample.js）として保存します。
HTMLでsample.jsファイルを読み込み、HTMLファイルをブラウザー（Chrome）で開き、表示を確認します。
■HTML<!doctype html><html lang="ja"><head><meta charset="utf-8" /><title>サンプルページ</title></head><body><a id="link" href="https://zomeki-creators-club.jp/">
ZOMEKIクリエイターズ倶楽部サイト</a><script>のsrc=“”にファイルへのパスを記載して、<script src="./sample.js"></script>
JavaScriptファイルを読み込む</body></html>■JavaScript(sample.js)
const a = document.getElementById('link');a.addEventListener('click', () => {alert('外部サイトに移動します。よろしいですか？');});-7-

ページ間のリンク
Webサイトのページとページのリンクについて説明します。
1．Webサイトのトップページ以外のページは、他のページからリンクされていないと、ページをたどってアクセスすることができません。
2．ページのURLがわかっている場合は、他のページからリンクされていなくても、ブラウザーのURL欄に直接URLを入力してアクセスすることができます。
ただしGoogleなどのクローラーは、アクセスすることができないため、検索エンジンにはヒットしません。

3．ドメインをアクセスすると、/index.html を表示するという設定されているので、ドメインがわかればトップページをアクセスできます。

・Webページを手作業で作成した場合、リンク元のページに新しく作成したページのリンクを設定する。
・一般にWebページには、グローバルナビ、パンくずリスト、フッターなどのリンクが設定されている。
これらのリンク先が変更になると、すべてのページのリンクを変更しなければならない。

フッターナビ-8-

Webサイトの構成
典型的な自治体公式サイトの構成を説明します。
自治体公式サイトは次のようなページで構成されています。
・トップページ
・新着記事一覧ページ
・カテゴリ別記事一覧ページ
・記事ページ・固定ページ・問合せフォーム

トップページ

ファイル名はindex.html

記事タイトルを中心に構成されているページ。
掲載する記事タイトルが一定数を超えると、新しい一覧ページが作成される新着記事一覧

問合せフォーム

固定ページ

分野別記事一覧

目的別記事一覧

記事ページ

組織別記事一覧「お知らせ」など頻繁に追加・更新されるページ

情報の内容が掲載されている「個人情報の取り扱いについて」など、固定的に掲載されているページ-9-

Webページの構成
典型的な自治体公式サイトの記事ページの構成を説明します。

ヘッダー

グローバルナビ
パンくずリストメイン

右サイドバー

記事ページでは、メイン以外の部分は複数ページで共通である。
メインとその他の部分を分けて処理する。

アンケート- 10 -CMSの構成
Webサイトの作成を支援するCMSのしくみを説明します。
複数のWebページで構成されるWebサイトを手作業で作成するのは非常に手間がかかります。
Webサイトの制作を支援するシステムとして、CMS（Content Management System）があります。
CMSはサーバー側で稼働するWebシステムです。
CMSの基本的な構成を説明します。
閲覧ユーザー

Web
システム

ブラウザー

サーバー

PC

CMSには一般の閲覧ユーザーがアクセスしている「公開画面」とは別に、サイトの管理者用の画面が設けられています。
サイトの更新はこの管理画面にアクセスして行います。
管理画面はログイン画面によるユーザー認証が設定されています。
さらにアクセス元IPアドレスでの制限やBASIC認証ダイアログが設定されている場合があります。

公開画面

データ

管理ユーザー

管理画面

公開画面
https://web1.demo.joruri2020.joruri-cms.jp/top.html
管理画面
https://web1.demo.joruri2020.joruri-cms.jp/_system/gp_article/c1/1/docs- 11 -

JoruriCMS2020がページを生成するしくみ
JoruriCMS2020がページの要素を組み合わせて、ページを生成するしくみを説明します。
1．各種コンテンツまたは固定ページなどの標準機能で、ページのベースを作成します。
2．ページのベースに設定されているレイアウトを組み込みます。
3．レイアウトに配置されているピースを組み込みます。
4．レイアウトのヘッダーに記述されているCSSとJSを読み込みます。
5．以上の処理を行いページを作成し、静的HTMLとして書き出します。

静的HTMLファイルとして書き出す

ページにレイアウトを設定し、基本的な枠組みを作成する■ページ生成の構造図

レイアウトに記載されているピースが組み込まれるページのベースは、各種コンテンツおよび標準機能が作成する読み込むスタイルシート（CSS）とJavaScript（JS）は、レイアウトのHEAD部分に記述する- 12 -

HTMLの枠組み
WebページのHTMLの枠組みについて説明します。
Webページのヘッダー、フッター、サイドバーなどは、HTMLの枠組みで構成します。
1．WebページのHTMLは、全体を<html>タグで囲みます。
2．<html>の中は、<head>と<body>の2つに分かれます。
3．ブラウザーに表示される情報は、<body>の中に記述したものです。
4．<body>の部分は、情報を配置しやすいように複数のエリアに分けます。
5．header、nav、asideはHTML5で追加されたタグです。
6．CMSのコンテンツが出力するデータは、一般には#contentに表示します。

<html><head></head><body><div id="container"><header id="pageHeader"></header><nav id="pageNav"></nav><div id="main"><div id="wrapper"><div id="content"></div><aside id="links"></aside></div></div><footer id="pageFooter"></footer></div></body></html>- 13 -

記事作成画面
記事ページのメイン部分は専用の入力画面から情報を登録します。

記事ページのメイン部分は簡単に情報を登録できるように、専用の入力画面を用意しています。
下記の記事作成画面で、記事のタイトル、内容の入力や各種の設定を行います。
記事本文はWYSIWYGエディタを使い、ページを公開したときの状態とほぼ同じ見え方で編集できます。

ページのタイトルを入力する

WYSIWYGエディタ

貼り付けた写真を作成画面で確認できる

記事ページの設定項目

貼り付けまたは添付するファイルをアップロードするページ作成後に保存し、承認依頼するか公開する- 14 -

JoruriCMS2020のコンテンツの役割
ページのコンテンツ部分は、記事コンテンツなどの各種のコンテンツが生成します。
ページのコンテンツ部分は、用途ごとに異なるコンテンツが生成します。
下記のようなコンテンツがあります。

- 15 -

レイアウトの管理画面
レイアウトは管理画面の[テンプレート]ｰ[レイアウト]メニューに格納されています。

管理画面への入力では、<head>、<body>は省略できる。

- 16 -

レイアウトのHTML
記事ページのレイアウトを例として、レイアウトのHTMLの構造を説明します。

[[ ]] は、JoruriCMS2020独自の記述方法で、外部データの読み込みを示す

ページに読み込むスタイルシートを記述

divタグでいちばん外側の構造に、container と命名

NavなどHTML5で規定されたタグを利用[[content]] の位置に、コンテンツからの出力を表示

レイアウトでは、[[＜オブジェクト種別＞/＜アイテム種別＞]]の形式で、外部オブジェクトを組み込めます
オブジェクト種別piece
ピースを組み込む。
text
テキストを組み込む。
content
コンテンツの出力を組み込む。

- 17 -

記事ページの公開画面
記事ページのレイアウトを例として、レイアウトのHTMLの構造を説明します。

page-title ページタイトル

print-btn 印刷タグ

メイン部分の構成<div id="content">[[piece/page-title]][[piece/print-btn]][[content]][[piece/sns-parts]][[piece/back-btn]][[piece/feedback]]</div>

content 記事コンテンツからの出力

sns-parts SNS連携ボタン
back-btn 前ページに戻る
feedback

記事ページのアンケート- 18 -

ピース一覧
ピースの一覧とそれぞれの機能を説明します。

- 19 -

コンテンツとピースの関係ページを構成するコンテンツとピースについて説明します。
ページに配置できるコンテンツはひとつまでです。
ページはひとつのコンテンツと複数のピースで構成されています。
トップページにはコンテンツを配置できません。
トップページは、ピースのみで構成されています。

■カテゴリ別記事一覧ページ

記事コンテンツ

記事一覧ピース

カテゴリ
コンテンツ

カテゴリコンテンツが出力する部分

https://web1.demo.joruri2020.joruri-cms.jp/category/lifescene/shushoku/- 20 -

JoruriCMS2020の管理画面メニュー
JoruriCMS2020の管理画面のメニュー構成とそれぞれの機能を説明します。

記事コンテンツについて説明しました。

ピースとレイアウトの関係について説明しました- 21 -

改版履歴
発行日
第一版

2024-07-27- 22 -