JavaScript で共通化パーツを構成
いよいよ、パーツ単位でどうこう、というレベルでは無くなってきました。
前職で、CMS 移行のために、CMS のみではできない部分を開発する、ということをやってきたことが、そのまま活きてくるとは。。。
フツーに考えても、10ページ以上で構成しているページ、ヘッダー・フッターとか、共通になる部分を、ページごとに直書きしてるのは、どう考えても無駄でしょ。
挙句に、そのメニューだの、追加とか修正するの、全置換できるかもしれんけど、どっかのページ漏れたらどーすんの？ 結局、全ページ確認せなアカンわけでしょ？ 何その無駄時間。
スマホ用との display none での出し分けだので、2回同じこと書くとか、アタマどーかしてるぜ。
本当なら、いろんな CMS 同様、PHP で include 使ってしまうのが理想的ではあるんやけど、PHP 使えないとか、〜〜.html って URL が既に出回ってるから、リンク切れ作れん、とか。
まぁ、色々あるでしょーよ。
しゃーない、JavaScript で、何とかしよ。
一番手っ取り早い方法。
どっか、短めの１ページを、テンプレートページにしてしまう。
include とか、ディレクトリを作って、テンプレートページを、丸コピー。
js-include.htm とか、テキトーにファイル名を付ける。.htm にするのは、一応、Firefox 対策。txt とか、dat でも無問題なんやけど、dat とかにしてたら、読めないファイルかもしれん、とか、Firefox が文句言うてるアラートを、開発用コード画面に吐きよるから、見られたら何ぞ言われるのもめんどくさいなー、と思ったから、htm で対処する。
header と、footer タグで作ってあったら、話は早い。
もしくは、div でも、id=header, id=footer とか、要は判断できるように構成していれば、瞬殺できる。
HTML 側
</head>
<body>
<header>
<div id="header_wrap">
<!-- ロゴ -->
<div id="logo"><a href="#"><img src="/images/logo.png" alt="Top"></a></div>
<div class="h1">〇〇<br class="isSp">△△△<br><span>xyzxyzxyz</span></div>
<div id="menu_wrap">
<!--サブメニュー-->
<div id="sub_nav2">
<ul>
<li><a href="#">HOME</a></li>
<li>> <a href="/en/">English</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
<!--/サブメニュー-->
</div>
</div>
<!-- メインメニュー -->
<nav class="isSp"><!-- For SP -->
<div class="sp_nav">
<div class="main_nav">
<ul class="dmenu"><!-- Copy .main_nav .dmenu>li' -->
</ul>
</div>
</div>
<div class="menu-next">＞</div>
</nav>
<nav2><!-- Copy .main_nav -->
</nav2>
</header>
<script src="/include/incl-header.js"></script>
<div>
〜〜〜本文内容など〜〜〜
</div>
<footer>
</footer>
<script src="/include/incl-footer.js"></script>
</body>で、header, footer は、もう詳細を書かなくて良い。
修正も、1ファイルを修正すれば良くなる。
なんで、そーゆーこと、しないわけ？ ページの部分的に担当してるわけやない、サイト運用を任されてるなら、クライアントがどうこう、関係無いやろ。
なるべく早く、より確実に、作れる・修正できること、が優先なんぢゃなくて？ ヘッダーの修正、100ページに、100ページ分の修正費用かかります、が、クライアントのためにならんでしょーよ。
でも、直書きしてたら、基本的には、それだけ時間はかかるし、費用かかるだけの、作業も発生するわけ。
ぢゃぁ、共通パーツ化、する最初だけは、ちょっと時間と費用もらうかもしれんけど、それ以降も運用任されるんなら、修正する側も、楽にできるし、確認するクライアントも楽できるんやったら、えぇんちゃう？
勝手にやっとくで。
読み込みパーツ用ページ
<html>
<!--から、フツーにページにしていても良いし、必要な部分だけ並べても OK-->
<!--修正などで、このページを開いて、エディタなどで簡単に修正するには、ページ化しておいた方が、色々やりやすい-->
<body>
<header>
<div id="header_wrap">
<!-- ロゴ -->
<div id="logo"><a href="#"><img src="/images/logo.png" alt="Top"></a></div>
<div class="h1">〇〇<br class="isSp">△△△<br><span>xyzxyzxyz</span></div>
<div id="menu_wrap">
<!--サブメニュー-->
<div id="sub_nav2">
<ul>
<li><a href="#">HOME</a></li>
<li>> <a href="/en/">English</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
<!--/サブメニュー-->
</div>
</div>
<!-- メインメニュー -->
<nav class="isSp">
<div class="sp_nav">
<div class="main_nav">
<ul class="dmenu">
<li class="menu_d first"><label for="about" class="lb_about mdlbtn">なんたら<br class="isSp">かんたらについて</label>
<ul class="open about_sub">
</ul>
</li>
<li class="menu_d second"><label for="active" class="lb_active mdlbtn">告知内容</label>
<ul class="open act_sub">
</ul>
</li>
<li><a href="/member/">会員ページ</a></li>
<li><a href="/admission/">案内</a></li>
<li><a href="/contact/">お問合わせ</a></li>
</ul>
</div>
</div>
<div class="menu-next">＞</div>
</nav>
<nav2><!-- メインメニュー -->
<div class="main_nav">
<ul class="dmenu">
<li class="menu_d csirt"><label for="about" class="lb_about mdlbtn">なんたら<br class="isSp">かんたらについて</label>
<ul class="open about_sub" data-modalIndex="1">
<li><a href="/outline/">outlineについて</a></li>
<li><a href="/outline/about.html">outlineとは</a></li>
<li><a href="/outline/vision.html">vision</a></li>
<li><a href="/outline/organization.html">organization</a></li>
<li><a href="/outline/history.html">history</a></li>
<li><a href="/outline/policy.html">policy</a></li>
</ul>
</li>
<li class="menu_d"><label for="active" class="lb_active mdlbtn">activity</label>
<ul class="open act_sub" data-modalIndex="2">
<li><a href="/activity/">活動内容</a></li>
<li><a href="/activity/live.html">live</a></li>
<li><a href="/activity/award.html">award</a></li>
<li><a href="/activity/support.html">support</a></li>
<li><a href="/activity/event.html">event</a></li>
</ul>
</li>
<li><a href="/member/">会員ページ</a></li>
<li><a href="/admission/">案内</a></li>
<li><a href="/contact/">お問合わせ</a></li>
</ul>
</div>
</nav2>
</header>
<footer>
<div id="footer_menu_wrap">
<div id="footer_list" class="isPc">
<div class="footer_menu">
<ul class="about_sub">
<li><a href="/outline/">outlineについて</a></li>
</ul>
</div>
<div class="footer_menu">
<ul class="act_sub">
<li><a href="/activity/">活動内容</a></li>
</ul>
</div>
<div class="footer_menu mem">
<p><a href="/member/">会員ページ</a></p>
<p><a href="/admission/">案内</a></p>
<p><a href="">対応</a></p>
<p><a href="">外部リンク</a></p>
<ul class="ft_link">
<li><a href="https://www." target="_blank">XXXXX</a></li>
<li><a href="https://www" target="_blank">YYYY</a></li>
</ul>
</div>
</div>
<div id="sp_footer" class="isSp">
<details class="footer_menu">
<summary id="ft_about_ttl">/////について</summary>
<ul class="about_sub">
</ul>
</details>
<details class="footer_menu">
<summary id="ft_act_ttl">活動内容</summary>
<ul class="act_sub">
</ul>
</details>
<div class="footer_menu mem">
</div>
<details class="footer_menu">
<summary id="ft_link">Link</summary>
<ul>
</ul>
</details>
</div>
<ul class="footer_btm">
<li><a href="/privacy/">プライバシーポリシー</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
<li><a href="/en/">English</a></li>
</ul>
</div>
</footer>JavaScript 側 incl-header.js
<script><!--
$('.sp_nav').load('/incl/incl-full.htm nav2 .main_nav');
$('nav2').load('/incl/incl-full.htm nav2 .main_nav');
//--></script>