ページ構成

CCS Webサイト
├ Top
│ │ 最新数件のトピックス、Twitter
│ └ Topics
│    年度別一覧を用意
├ About
│  文章、画像を最新に
│   以降、毎年役職の引継時に更新するように
├ Works
│  イベントごとに1ページ
│  ジャケット画像、動画
│  作品ごとのスクリーンショット、情報
├ Only
│ │  正しく機能する認証機構
│ │  内容の整理
│ ├ お絵描きBBS
│ │  現状維持
│ └ Only Wiki
│    廃止
├ Wiki
│  作品に関しては、製作者まかせだと誰も作成しないので、Webサイト側へ移動
│  残りは軽く再整理するのみ、ほぼ現状維持
├ Link
│  整理
├ Sitemap
│  CMSに自動生成してもらう
├ Notice
│  ページフッタあたりにリンクを設置
└ Contact
   メールフォームを用意

その他

  • フォントは、質の高いものが用意できなければ購入も検討
  • メーリス、@densanken以外の会員間での連絡手段をWebサイトに持たせる
    • Twitterで@densankenを含むツイートを、botで再送するシステムの構築
  • デザインの基本コンセプトは、前回のもので問題なし
  1. HTMLでレイアウトを作成
  2. デザインの決定
  3. CMSの設置

本やポスター等の紙媒体は、誰もが同じ環境で読まれますが、Webはそれぞれ全く異なります。
問題になるのは、画面解像度ブラウザです。

画面解像度

800x600、1024x768、1280x1024、1920x1080、2560x1440、2880x1880など無数にありますが、 これらすべてで読みやすいように表示されなければなりません。

ブラウザ

悪名高い InternetExplorer6 をはじめとする古いブラウザは、HTML5やCSS3などの最新の技術に対応していません。 新しいブラウザにおいても、Blu-ray DiscとHD DVDのような規格争いがあったり、それ以前に、規格自体がまだまとまっていないというようなこともあります。

どのように対応するか

  • 画面解像度
    レイアウトを工夫することで、読みやすいページにすることができます。
    • 固定幅レイアウト
      どの環境でも同じ幅で表示させるレイアウト。
      設定した幅と著しく異なる画面解像度を持つ環境だと読みづらくなってしまいます。
      しかし、画面解像度の差を考慮しなくていいので、制作側としては最もうれしいです。
    • 可変幅レイアウト(リキッドレイアウト)
      画面解像度によって、ページの幅が変化するレイアウト。
      ある程度の画面解像度の差は、これを採用することで吸収できます。
      ただし、必ずしも読みやすくなるとは限りません。

      読みづらい例:

    • レスポンシブレイアウト
      あらかじめ、PC用、スマートフォン用といったように、いくつかの環境を想定して異なるレイアウトを用意しておく方法。
      想定された環境においては、読みやすい表示ができます。
      もちろん、それぞれの環境に対応させるための手間がかかってしまいます。
  • ブラウザ
    • 古いブラウザ用のページへ自動でジャンプ
      サーバ側で、ブラウザのバージョンを判別し、もし正しく表示できないブラウザであれば、新しい技術を利用していないページへジャンプさせます。
      同じページを2つ作らなければいけないため、保守性は下がってしまいます。
    • html5shimの利用
      HTML5から追加された要素に関しては、IE6〜IE8にも無理矢理対応させることができます。
    • 未知のプロパティは無視されることを利用する
      ブラウザ間でCSSの対応に差がある場合に対してよく使われる手法です。
      例えば、プロパティの接頭辞がGecko系では-moz、Webkit系では-webkitという場合、両方とも指定することで、すべてに対応させます。

Wordなどのワープロソフトで行なう処理をテキストだけで行なうための言語です。

例えば、文章の一部を太字にする場合、Wordでは、

  1. 文章を入力する
  2. 太字にしたい部分を選択する
  3. ツールバーの B と書かれたボタンをクリックする

という手順を踏みますが、HTMLでは、

  1. 文章を入力する
  2. 太字にしたい部分を<strong></strong>で囲む

とすると、Webブラウザが囲われた部分を太字に処理して画面に表示してくれます。

よく出てくる用語の説明

タグ
<html>のように、<>で囲まれたもの
要素
<strong>内容</strong>のように、タグタグで囲まれた内容をまとめたもの
この場合は、strong要素と呼びます
属性
<img src="./image.png">の、src="./image.png"の部分のこと
img要素のsrc属性は画像の場所を指定します

デザインのHTML化

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>ページのタイトル</title>
	<style>
		* {
		    margin: 0;
		    padding: 0;
		}
		body {
		    background-color: #FFFFFF;
		    width: 100%;
		}
		#header {
		    width: 100%;
		    background-color: #ffc6c6;
		}
		#sidebar_left {
		    float: left;
		    width: 250px;
		    background-color: #c6e2ff;
		}
		#menu_left {
		    padding: 1em 0 2em 1em;
		    background-color: #c6e2ff;
		}
		#sidebar_right {
		    float: right;
		    width: 250px;
		    background-color: #c6e2ff;
		}
		#menu_right {
		    padding: 1em 0 2em 1em;
		    background-color: #c6e2ff;
		}
		#main {
		    height: 100%;
		    margin-left: 250px;
		    margin-right: 250px;
		    background-color: #ccffcc;
		}
		#contents {
		    padding: 1em;
		}
		h1 {
		    padding: 1.5em;
		}
		#contents p{
		    margin: 1em 0 2em 1em;
		}
		li {
		    list-style: none;
		}
	</style>
</head>
<body>
	<div id="header">
		<h1>〜タイトル〜</h1>
	</div>
	<div id="sidebar_left">
		<div id="menu_left">
			<ul>
				<li>メニュー1</li>
				<li>メニュー2</li>
				<li>メニュー3</li>
				<li>メニュー4</li>
			</ul>
		</div>
	</div>
	<div id="sidebar_right">
		<div id="menu_right">
			<ul>
				<li>メニュー1</li>
				<li>メニュー2</li>
				<li>メニュー3</li>
				<li>メニュー4</li>
			</ul>
		</div>
	</div>
	<div id="main">
		<div id="contents">
			<h2>見出し1</h2>
			<p>
				コンテンツ1
			</p>
			<h2>見出し2</h2>
			<p>
				コンテンツ2
			</p>
		</div>
	</div>
</body>
</html>

コンテンツマネジメントシステムの略。
HTML等の知識がなくても、Webサイトの構築・管理をできるようにしたシステムのこと。
ファイル管理の手間が省ける、テーマによるデザインの統一、プラグインによる拡張性などメリットはたくさんあります。

有名なCMS

CMSは、00年代後半からどんどん増え続け、高機能なものからシンプルにまとめたものまで、様々なものが作られました。 似たようなシステムも多いですが、細かな差異があるので、それぞれ自分がよいと思ったものを選びましょう。

選び方

  • 先に利用したいCMSを決めて、それが動作するサーバを用意する
  • 既にサーバはあるので、そこで動作するCMSでよいものを探す

CMSの比較は以下の点をみるといいでしょう。

  • データベースが必要か
  • 日本語対応
  • 必要な機能を持っているか
  • それなりに使われているか
  • 動作速度、サーバへの負荷
  • 管理画面の使い勝手

今回は、既に利用するサーバが決まっているので、それに合わせてCMSを決めることになります。
CCSのWebサイトが置かれているサーバは、データベースが利用できません。
したがって、軽量CMSと呼ばれる、データベースが必要ない種類のCMSから選択することになります。

軽量CMSの例

今回は gpEasy CMS を使用します。

  1. CMSをダウンロード、解凍
  2. アップロード
  3. Webブラウザからインストーラを呼び出す
  4. 指示に沿ってインストールする

通常のCMSの場合は、データベースの設定等も必要になります。