【alevirita】JavaScriptを使ってCDPのメニューを管理する

条件や注意点

JavaScript無効の環境のため必ず代替コンテンツを提供してください
一部の方法以外現在のページを表す.menu-onは使えません。

JavaScriptは閲覧者の環境によっては見れない場合があります。メニューを外部化するならばPHPやSSIなどサーバー側で処理することをお勧めします（サーバーで利用できるのであれば）。または、複数のファイルを一気に編集するにはローカルで置き換えソフトを利用するという方法もあり、閲覧者の環境を問わず確実です。

代替コンテンツの提供

代替コンテンツの重要性

JavaScriptの実行は閲覧者の閲覧環境によって左右されます。JavaScriptがそもそも読み込めない環境や、わざと無視する環境ではメニューを参照することができず、閲覧者は貴方のサイトをそれ以上見ることができません。何かしらの形で、環境に左右されず誰でも参照できるメニューを用意する必要があります。

提供例

今回の場合、全ページで全メニューを書き出したら外部化する意味があまりなくなっちゃうわけですが、例えば

サイトメニューのページ（サイトマップ）を作成し、メニューを読み込めない環境はそのページへ誘導する
indexのメニューだけ直接htmlに書き込み、メニューを読み込めない環境向けに他のページではindex（のメニューブロック）へ誘導する

など、一箇所だけでもJavaScriptを利用しないメニューを作成してそこに誘導する方法はどうでしょう。メニューを編集したいとき、JavaScriptとHTMLと二つのファイルの修正が必要になりますが、全ページを編集するのに比べたら管理もそこまで面倒ではないのではないでしょうか。1つのindexから全てのページを参照できて全てのページからindexを参照する構成のサイトも現在存在していますし、CDPは深い階層のサイトにはあまり特化していませんからそういう構成と同等に考えるならば、最低限まかなえるのではないかと思います。

それでもJavaScriptに対応していない閲覧者にとっては不便がともなっていることを忘れないでください。階層や構造によっては、該当ページと関係が深いページ（エンターページからの詳細なaboutページへだとか、小説の個別ページから目次ページへ等）へのリンクも加えるといいかもしれません。

実践

自分でdocument.write('');を書くのと、メニュー情報（項目名とhref値）を設定してあとは自動に書き出させるのと二種類方法があります。

註：ページによって階層を分けている方は、href値（アドレス）をルートからの絶対パスを利用するなどしてどこのページから参照してもアクセスできるようにしてください。

`document.write`で書き出す方法

メニューリスト（<ul>から</ul>まで）をテキストエディタに貼り付け（この際class="menu-on"は削除）、document.write();を付け加えます。

(書き方その1)毎行

document.open();
document.write('<ul>');
document.write('<li id="MENU01"><a href="index.html">index</a></li>');
document.write('<li id="MENU02"><a href="sample1.html">sample1</a></li>')
document.write('<li id="MENU03"><a href="sample2.html">sample2</a></li>')
document.write('<li id="MENU04"><a href="sample3.html">sample3</a></li>');
document.write('</ul>');
document.close();

(書き方その2)改行毎に\

document.open();
document.write('
<ul>\
<li id="MENU01"><a href="index.html">index</a></li>\
<li id="MENU02"><a href="sample1.html">sample1</a></li>\
<li id="MENU03"><a href="sample2.html">sample2</a></li>\
<li id="MENU04"><a href="sample3.html">sample3</a></li>\
</ul>
');
document.close();

(書き方その3) JavaScriptでヒアドキュメントを使うライブラリを利用

検索すると見つかるかと思います。行毎にdocument.writeを書いたり、改行コードを記述しなくても済みます。

ここまでのJavaScriptが書き込まれたファイルを、menu.jsという名前(管理しやすい名前でいいです。でも拡張子は.jsにします）で保存

メニューリストの記述を消したhtmlファイルの、メニューリストがあった位置で、menu.jsの読み込ませます

<!--================-->
<!--　　メニュー　　-->
<!--================-->
<div id="MENU">
<h2>menu</h2>

<script type="text/javascript" src="menu.js"></script>

</div>
<hr>

ついでに<noscript>（JavaScript無効環境でのみ表示されます）を使って代替コンテンツを提供

<div id="MENU">
<h2>menu</h2>
<script type="text/javascript" src="menu.js"></script>

<noscript>
  <ul>
     <li id="MENU01"><a href="代替コンテンツのURL">menu</a></li>
  <ul>
</noscript>

</div>

情報を設定して関数指定で自動出力

JavaScriptををテキストエディタに貼り付け、必要なだけメニュー情報を修正+書き足します。（以下は一例のコードです）

menu.js

function cdpMenu(menuid){
var mymenu = new Object();

//▼メニュー情報
//mymenu.メニュー項目名 = 'href値';
//の形で一行ずつ必要なだけ追加

mymenu.index = 'index.html';
mymenu.sample = 'sample.html';

//▲メニュー情報

var num = 1;
function menuID(id){
var str = String(id);
while (str.length < 2){ str = "0"+str; }
return str; }

document.open();
document.write('<ul>');
for(var i in mymenu){
document.write('<li id="MENU'+menuID(num)+'"');
if(menuid==menuID(num)){ document.write(' class="menu-on"'); }
document.write('"><a href="'+mymenu[i]+'">'+i+'</a></li>');
num++; }
document.write('</ul>');
document.close();
}

ここまでのJavaScriptが書き込まれたファイルを、menu.jsという名前(管理しやすい名前でいいです。でも拡張子は.jsにします）で保存

メニューリストの記述を消したhtmlファイルの、メニューリストがあった位置で、menu.jsの読み込みと関数を挿入

<!--================-->
<!--　　メニュー　　-->
<!--================-->
<div id="MENU">
<h2>menu</h2>

<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript">
cdpMenu('現在開いているメニュー項目名');
</script>


</div>
<hr>

「現在開いているメニュー項目名」を指定するとそれと同じ項目のリストにclass="menu-on"がつきます