友人の「私のがん記録」ホームページを改修

2011年2月に作成した、友人のサイト「私のがん記録」は、当初想像していた構成とは違った形になってきたので、いつか改修したいと思っていたが、手を付けられないまま5年が過ぎた。
当初、サーバーは「さくらインターネット」のレンタルサーバーだったが、その内友人の家にCATV環境が整ったのを機に、飛騨高山ネットのホームページサービスを利用するようになっていた。
また、友人は別に「夢の缶詰」という夢の記録とその夢を見た背景などを書いたホームページを持っていた。それらを1本にまとめてブログの日記風にしたいと考えていた。
最近、私も遅ればせながらスマホを持つようになった。これを機に私が作成したホームページを狭い画面のスマホに対応するレスポンシブなデザインにしたいと思うようになった。そしてある日偶然にも、CSS3とHTML5に対応したテンプレートを無料で利用できるサイト「HTML5テンプレート」を発見した。これで改修する機運に一気に火が付いた。
先ずは、手始めに「美しき日本の風景」の改修に取り掛かり、90%位で来たのでそれをアップして、今回の「私のがん記録」の大改修に着手した。

テンプレートは先に改修した「美しき日本の風景」で、No.006 を使用しているので、2番人気の No.003 にした。
これは、トップページにトップナビとして3個のナビゲーションが用意されているタイプで、これから作成しようとしている日記の大きな見出しの「がん日記」「夢日記」「なんでも日記」にちょうどいい。

しかし、表示がPCモードの場合、中央に3つ並んだ「見出し1」~「見出し3」の表示順を、表示をスマホモードにした場合、上から「見出し1」~「見出し3」の順序にするのではなく、重要度の高い中央の「見出し2」を一番上に、次いで「見出し3」、最後にサブ領域の「見出し1」にしたいと考えて、CSSをいじってみたが、どうしても期待通りに並んでくれない。そこで、作者に問い合わせてみた。
そうしたら、直ぐに下記の返事をいただいた。

コンテンツの順番を並び替える方法ですが、考え方としては合っています。
あとは、横幅の計算だけです。

レスポンシブWebデザインなので、横幅をパーセントで計算する必要があります。
例えば、この場合、3つのボックスが同じサイズで横並びになっています。
各ボックス間の余白を1%とします。
そうすると、ボックスのサイズは、(100% - (1% × 2)) / 3= 32.666% になります。
見出し1を囲んでいるボックス(topNaviL)の横幅は32.666%、
見出し2と3を囲んでいるボックス(topNaviR)の横幅は66.332% になります。
見出し2と3のボックスの間の余白は、囲んでいるボックス(topNaviR)から見ると、
1% × 100% / 66.332% = 1.5% になりますので、
見出し2と3のボックスは、(100% - 1.5%) / 2 = 49.25% になります。

そして、CSSの具体例も付けてあった。至れり尽くせりだ。感謝感謝です。

日記のデータは3個のカテゴリーを分離せず、同一のCSVファイル「list.txt」に書くことにし、カテゴリーはカテゴリ番号で区別することにした。データの並びは、
日付の数字(8桁)、カテゴリ番号、タイトル、記事内容、の順にした。
データの区切りになるデリミタには、記事の中で使われる恐れのない「<>」にした。これは KENTさんの CGI に使われていたので、それ以来デリミタには、いつもこの文字を使っている。

以上で、ホームページの基本構成はできたので、「list.txt」に数行のデータを手入力して表示させてみると、うまく行っている。あとはデータの入力を簡単にできるようにする「ホームページ作成支援ツール」(通称 Mツール)を作成しなければならない。ここで問題なのが、素材には画像の他に動画ファイルもある。幸いHTML5には動画ファイルを簡単に再生する videoタグが用意されている。これを使って、画像ファイルを同じ扱いで、動画ファイルを埋め込むことを試みた。
そして出来上がった「Mツール」はこれ。

使い方は、先ず画像・動画・音楽ファイルを「画像登録欄」で登録する。次に「日記内容欄」に記事を書いて行く。その中で画像や動画を挿入したい位置で、<1><2> の形式で先に登録した画像ナンバーを指定する。画像は横2枚または横1枚のレイアウトで、それ以外のレイアウトには対応していない。日記の場合は横に1枚または2枚で十分だと思う。
画像も動画も音楽も、登録してしまえば、全く同じ扱いで、記事の中に埋め込むことができる。

と、いうことで完成したのが、下記のサイトです。
http://dreamfour.sakura.ne.jp/
動画のページ、および音楽ファイルの埋め込みページはそれぞれ下記のページです。
http://dreamfour.sakura.ne.jp/contents/index.html?id=20110422&ct=1
http://dreamfour.sakura.ne.jp/contents/index.html?id=20161008&ct=1

今回も各HTMLページには画像データや記事などのHTMLタグは直接入力せず「list.txt」によるデータベース方式にして、JavaScript で表示することにした。そのため画像や記事が追加になっても、トップページおよび日記ページのHTMLを書き換える必要は全くない。「contents」フォルダの「list.txt」にデータを追加するだけでよい。
日記は10月8日現在で508ページ分もあるが、1枚のHTMLページを共用するために、URLパラメータ方式を採用した。このため508ページものHTMLページを用意する必要はなく、1ページのHTMLページで済んだので非常にシンプルになった。

URLパラメータで日記を表示する「diary.js」は、下記の通り。なお、csv2Array(FilePath) については、前記事を参照。


var lstData = csv2Array("list.txt");					// リストをlstDataに読み込む
var pos;
window.onload = function() {
	var urlParam = location.search.substring(1);		// URLのパラメータを取得
	if(urlParam) {								// URLにパラメータが存在する場合
		var param = urlParam.split('&');			//「&」が含まれている場合は「&」で分割
		var paramArray = [];						// パラメータを格納する配列
		for (i = 0; i < param.length; i++) {			// 配列にパラメータを格納
			var paramItem = param[i].split('=');
			paramArray[paramItem[0]] = paramItem[1];
		}
		filename = paramArray.id;				// filenameにパラメータidの値取得(日付文字列)
		category = paramArray.ct;				// 第2パラメータのカテゴリ取得
		var flen = filename.length;				// ファイルネームの文字列長(年月日か年月か)
	}
	var html = "";
	var listlen = lstData.length;					// リストの長さ
	for (var i=0; i<listlen; i++) {
		if (flen == 8) {
			var lstDate = lstData[i][0];				//8桁は年月日
		} else {
			var lstDate = lstData[i][0].substr(0, 6);	//6桁は年月
		}
		if (category) {							//第2パラメータの有無
			if ((filename == lstDate) && (category == lstData[i][1])){
				html += dispDiary(i);
			}
		} else {
			if (filename == lstDate) {
				html += dispDiary(i);
			}
		}
	}
	document.getElementById("diary").innerHTML = html;	//id="diary"にhtmlを埋め込む
}

function dispDiary(pos) {
	yy = lstData[pos][0].substr(0,4);				//年取得
	mm = lstData[pos][0].substr(4,2);				//月取得
	dd = lstData[pos][0].substr(6,2);				//日取得
	var myDate = new Date(yy, mm-1, dd);			//日付取得
	var jaDate = yy + '.' + mm + '.' + dd;
	var dayName = '日月火水木金土'[myDate.getDay()];	//曜日取得
	var flag = false;
	var html = "";
	html += '<div class="coment">\n';				//以下HTML生成
	if (lstData[pos][1] == 2) {
		html += '<h4>私のがん記録</h4>';
	} else if (lstData[pos][1] == 30) {
		html += '<h4>入院中の夢</h4>';
	} else if (lstData[pos][1] == 31) {
		html += '<h4>10代の夢</h4>';
	} else if (lstData[pos][1] == 32) {
		html += '<h4>20代の夢</h4>';
	} else if (lstData[pos][1] == 33) {
		html += '<h4>30代の夢</h4>';
	} else if (lstData[pos][1] == 34) {
		html += '<h4>40代の夢</h4>';
	} else if (lstData[pos][1] == 35) {
		html += '<h4>50代の夢</h4>';
	} else if (lstData[pos][1] == 36) {
		html += '<h4>今朝夢を見た</h4>';
	} else if (lstData[pos][1] == 38) {
		html += '<h4>夢分類</h4>';
	} else if (lstData[pos][1] == 39) {
		html += '<h4>夢分析</h4>';
	} else if (lstData[pos][1] == 51) {
		html += '<h4>家庭菜園</h4>';
	} else if (lstData[pos][1] == 54) {
		html += '<h4>陶芸</h4>';
	} else if (lstData[pos][1] == 57) {
		html += '<h4>合唱</h4>';
	}
	html += '<h3><span id="date">' + jaDate + '(' + dayName + ')</span>' + lstData[pos][2] + 
'</h3>\n';
	for (var j=3; j<lstData[pos].length; j++) {
		var regexp1 = /\w*\.jpg/;					//正規表現jpg画像
		var regexp2 = /\w*\.mp4/;					//正規表現mp4動画
		var regexp3 = /\w*\.mp3/;					//正規表現mp3音楽
		var str = lstData[pos][j];
		var result1 = regexp1.test(str);				//jpgのマッチ検索
		var result2 = regexp2.test(str);				//mp4のマッチ検索
		var result3 = regexp3.test(str);				//mp3のマッチ検索
		if (result1){							//jpgのマッチならば
			var str2 = lstData[pos][j+2];
			var result4 = regexp1.test(str2);
			if (result4) {						//画像2カラム
				html += '<div class="towCol"><div class="twoColInner">\n';
				html += '<div id="img"><a href="../images/' + lstData[pos][j] + '"><img src=
"../images/' + lstData[pos][j] + '" /></a><br>' + lstData[pos][j+1] + '</div>\n';
				j = j+2;
				html += '<div id="img"><a href="../images/' + lstData[pos][j] + '"><img src=
"../images/' + lstData[pos][j] + '" /></a><br>' + lstData[pos][j+1] + '</div>\n';
				html += '</div></div>\n';
				j++;
			} else {							//画像1カラム
				html += '<div class="oneCol"><div class="oneColInner">\n';
				html += '<div id="img"><a href="../images/' + lstData[pos][j] + '"><img src=
"../images/' + lstData[pos][j] + '" /></a><br>' + lstData[pos][j+1] + '</div>\n';
				html += '</div></div>\n';
				j++;
			}
		} else if (result2){						//動画の場合(mp4)
			html += '<div class="oneCol"><div class="oneColInner">\n';
			html += '<video controls><source src="../images/' + lstData[pos][j] + '" /></video><br>' + 
lstData[pos][j+1] + '\n';
			html += '</div></div>\n';
			j++;
		} else if (result3){						//音楽の場合(mp3)
			html += '<div class="oneCol"><div class="oneColInner">\n';
			html += '<audio controls><source src="../images/' + lstData[pos][j] + '" /></audio><br>' + 
lstData[pos][j+1] + '\n';
			html += '</div></div>\n';
			j++;
		}else{
			if (lstData[pos][1].substr(0,1) == 3) {	//夢日記の場合
				var regexp5 = /【|】/;
				var str = lstData[pos][j];
				var result5 = regexp5.test(str);
				if (result5){					//夢分析(茶色表示)
					flag = true;
					html += '<p class="coment2">' + lstData[pos][j] + '</p>\n';
				} else {						//夢日記(青表示)
					if (flag == true){
						html += '<p class="coment2">' + lstData[pos][j] + '</p>\n';
					} else {
						html += '<p class="coment1">' + lstData[pos][j] + '</p>\n';
					}
				}
			} else {							//その他は黒表示
				html += '<p>' + lstData[pos][j] + '</p>\n';
			}
		}
	}
	html += '</div>\n';
	return html;								//生成したHTMLを返す
}
				
データ
  • 2016.10.08(土)

 

アーカイブ

現在位置: ホームなんでも日記メニュー > このページ