WordPressなどの更新管理システムが実装されていない静的なサイトだと、例えば「お知らせ」などの、ほんの1か所を更新したい時、HTMLファイルをFTPをまるまるダウンロードしてきて、それを直接編集して、アップロードして更新するのが一般的だ。

ただ、1か所をちょっと更新したいだけなのに、更新する必要のないコードがびっしり書かれているファイルを毎回ダウンロードして、アップロードして、というのは、詳しい担当者がおこなうならまだしも、ウェブに疎い担当者におこなってもらうには、あまり宜しくない気がする。

間違って関係のない箇所をいじってしまったり、ファイル自体を削除してしまったり、違ったファイルを上書きしてしまったり、というリスクが伴うからだ。

そういう時の対処法は、たとえばお知らせ部分を「XMLファイルをjavascriptでで読み込む」作りにしておき、更新が必要な場合は、その読み込むxmlファイルだけをさわれるようにしておけば、HTMLファイルが危険に晒されることはなくなる。

更に、XMLファイルを格納するためだけのディレクトリを用意しておいて、そこだけにアクセスできるFTPアカウントを作る。これなら、どう間違ってもウェブサイトが見れなくなるということはなくなるし、最悪 ミスが起きてもXMLファイルがない=お知らせが表示されない、というリスクに限定することが出来る。

ということで、XMLファイルでお知らせを更新する方法をご紹介。

XMLファイルでお知らせを更新する方法

HTMLファイルの用意

まず、HTMLファイルに、xmlを読み込むボックスを用意する。以下では「newList」という名前のクラスを用意した。

<dl class="newsList">
</dl>

XMLファイルの用意

次に、読み込むXMLファイルは以下のような構成。「お知らせ掲載日(update_date)」「お知らせ内容(update_comment)」「リンク先(link_url)」「別ウィンドウで表示するかどうか(link_open_type)」。

お知らせ1つづつを<item*>(*は番号。0から順に)で囲む。

<items>
<script/>
<item0>
<update_date>2020/01/01</update_date>
<update_comment>ここにお知らせの内容</update_comment>
<link_url>http://example.com/01/</link_url>
<link_open_type>0</link_open_type>
</item0>
<item1>
<update_date>2019/12/27</update_date>
<update_comment>ここにお知らせの内容</update_comment>
<link_url>http://example.com/02/</link_url>
<link_open_type>1</link_open_type>
</item1>
<item2>
<update_date>2019/11/15</update_date>
<update_comment>ここにお知らせの内容</update_comment>
<link_url>http://example.com/03/</link_url>
<link_open_type>0</link_open_type>
</item2>
<item3>
<update_date>2019/02/29</update_date>
<update_comment>ここにお知らせの内容</update_comment>
<link_url>http://example.com/04/</link_url>
<link_open_type>0</link_open_type>
</item3>
</items>

javascriptファイルの用意

最後に、javascirptでそのクラスに読み込むためのスクリプトを用意する。

// -------------------------------------------------
// 初期設定(いったんHTMLを空にする)
// -------------------------------------------------
$(function(){
	$("newsList").html("");
});

// -------------------------------------------------
// XML読み込み ※URL欄は読込先を記述
// -------------------------------------------------
function xmlLoad(){
	$.ajax({
		   url:'***.xml',
		   type:'get',
		   dataType:'xml',
		   timeout:1000,
		   success:parse_xml
	});
}

// -------------------------------------------------
// XMLデータを取得
// -------------------------------------------------
function parse_xml(xml,status){
	if(status!='success')return;
	$(xml).find('items').children().each(disp);
}

// -------------------------------------------------
// HTML生成関数
// -------------------------------------------------
function disp(){
	
	//各要素を変数に格納
	var $update_date = $(this).find('update_date').text();
	var $update_comment = $(this).find('update_comment').text();
	var $link_url = $(this).find('link_url').text();
	var $opetyle = $(this).find('opetyle').text();


	//【HTMLを生成ver1】  ※特定の要素の値がない場合に条件分岐したい場合はこっちをコメントアウトして【ver2】のほうを使用する。
	$('<dt class="newsDate">'+$update_date+'</dt>'+'<dd><a href="'+$link_url+'" target="'+$opetyle+'">'+$update_comment+'</a></dd>').appendTo('.newsList');	

	//【HTMLを生成ver2】 ※特定要素(ここではlink_url)の値がない場合に条件分岐でリンクを付けない場合。
	//if($link_url != ""){
	//$('<dt>'+$update_date+'</dt>'+'<dd><a href="'+$link_url+'" target="'+$opetyle+'">'+$update_comment+'</a></dd>').appendTo('.newsList');
	//}else{
	//$('<dt>'+$update_date+'</dt>'+'<dd>'+$update_comment+'</dd>').appendTo('.newsList');
	//}
}


//関数実行
$(function(){
	xmlLoad();
});

読み込む場所や、生成するHTMLタグは適宜変更する。