JavaScriptでフッターの内容を統一する

多くの場合、個人サイトのヘッダーとフッターというのは共通して書かれる内容があります。
グローバルナビゲーションであったり、著作権の表示であったり。
そういったものを何かあるたびに全ページ回って修正していくのは大変な労力となります。
これをJavaScriptで解決することができます。

具体的には、別途htmlファイルを用意しておき、その内容をJavaScriptを使って各種のhtmlページに差し込んでいくのです。
こうすればヘッダーやフッターに何か変更があっても、その別にあるhtmlファイルさえ更新すれば、全てのページに反映されます。

Webサイトビルダーを使っていればこのような心配はほぼないのですが、手書きのコードで個人サイトを作っている場合、このような仕組みを予めどこに実装するか検討しておかないと、後からブラック労働化してしまうのです。

こういうところが、個人によるWebサイト制作が続かない原因の一つと言えるのではないでしょうか。

共通する記載を１つのhtmlで管理する

これは重要ですよ。
個人サイトの更新を手軽に続けているかどうかに、深く関わってくると思います。

JavaScriptを使って任意のHTMLコードを挿入するコードについて、説明します。
基本的な方法としては、JavaScriptの innerHTML プロパティを使用する方法があります。
とりあえず簡単な書き方を見ていきます。

HTMLファイルに、挿入先の要素を用意します。
JavaScriptファイルで、挿入するHTMLコードを指定します。

HTMLファイル例 (index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>共通部分の挿入</title>
</head>
<body>
    <div id="common-section"></div>
    <script src="script.js"></script>
</body>
</html>

JavaScriptファイル例 (script.js)


document.addEventListener("DOMContentLoaded", function() {
    var commonSection = document.getElementById("common-section");
    commonSection.innerHTML = `
        <h1>共通部分のタイトル</h1>
        <p>これは全てのページに共通する内容です。</p>
    `;
});

この例では、index.html の <div id="common-section"></div> に対して、script.js で指定したHTMLコードを挿入しています。
DOMContentLoaded イベントを使うことで、ページの読み込みが完了した後にスクリプトが実行されるようにしています。

外部HTMLファイルを読み込む方法

全てのページに共通する記載を一つのHTMLファイルにまとめたい場合、JavaScriptを使って外部HTMLファイルを読み込むこともできます。

HTMLファイル例 (index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>共通部分の挿入</title>
</head>
<body>
    <div id="common-section"></div>
    <script src="script.js"></script>
</body>
</html>

JavaScriptファイル例 (script.js)


document.addEventListener("DOMContentLoaded", function() {
    var commonSection = document.getElementById("common-section");

    fetch('common.html')
        .then(response => response.text())
        .then(data => {
            commonSection.innerHTML = data;
        })
        .catch(error => console.error('Error loading common section:', error));
});

外部HTMLファイル例 (common.html)


<h1>共通部分のタイトル</h1>
<p>これは全てのページに共通する内容です。</p>

この方法では、fetch APIを使って外部HTMLファイル（common.html）を読み込み、その内容を指定した要素に挿入しています。
これで、全てのページに共通する記載を一つのHTMLファイルにまとめることができます。

Pythonのフレームワークを用いる

一方、Pythonでも同様のことが可能です。
特にWebアプリケーションフレームワークであるFlaskやDjangoを使用すると、HTMLテンプレートを動的に生成して挿入することができます。

PythonではJavaScriptのように単にディレクトリにスクリプトを置いておくだけで動的にHTMLを挿入するのは少し難しいです。
Pythonはサーバーサイドの言語であり、Webページの生成や動的なコンテンツの挿入にはサーバーサイドのフレームワーク（FlaskやDjangoなど）を使用する必要があります。

JavaScriptはクライアントサイドで動作するため、ブラウザ上で直接HTMLを操作できますが、Pythonは通常サーバー上で動作し、クライアントにHTMLを送信する役割を果たします。
そのため、Pythonで同様のことを行うには、以下のような手順が必要です。

Pythonで動的にHTMLを挿入する手順

サーバーサイドフレームワークのセットアップ: FlaskやDjangoなどのフレームワークを使用してサーバーを構築します。
テンプレートエンジンの使用: Jinja2（Flask）やDjangoテンプレートエンジンを使用して、HTMLテンプレートを動的に生成します。
ルーティングの設定: 特定のURLにアクセスしたときに、適切なHTMLを返すようにルーティングを設定します。

昔はやってたけど、現在のところ、このサイトには導入してないですね。
費用が掛かる可能性を含めてApp Engineの仕様も改めて確認する必要がありますし、現在はJavaScriptによってこの種の機能を実装しています。

では、まずは挿入されるhtmlコードを書いてみます。

各ページに共通する記載：htmlファイル


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ヘッダー補足内容</title>
</head>
<body>
    <div class="commongdl">
        <div class="footer-links">
            <a href="/page/rss.html"><i class="fas fa-file-alt"></i> 更新のお知らせ</a>
            <a href="/page/policy.html"><i class="fas fa-file-alt"></i> サイトポリシー</a>
            <a href="/page/form.html"><i class="fas fa-envelope"></i> お問い合わせ</a>
        </div>
        <img src="/image/Google_badge.jpg" alt="Google_badge"
            class="biggraphic">
        <div class="social-links">
            <a
                href="https://url.com/"><i
                    class="fas fa-blog"></i> Blog</a>
            <a href="https://instagram.com/name"><i class="fab fa-instagram"></i> Instagram</a>
            <a href="https://www.threads.net/@name"><svg xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 448 512">
                    <path
                        d="M331.12345" />
                </svg> Threads</a>
            <a href="https://twitter.com/name"><i class="fab fa-twitter"></i> Twitter</a>
            <a href="https://bsky.app/profile/name.bsky.social"><svg xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 576 512">
                    <path
                        d="M407.12345" />
                </svg> Bluesky</a>
        </div>
        <p class="copyright">
            &copy; "name" All rights reserved.<br>
            本ホームページに掲載されている記事、写真、図表などの無断転載を禁じます。
        </p>
    </div>
</body>
</html>

Web標準について

HTMLコードそのものについては説明不要と思われます。
ここではWeb標準について、書いていきましょう。
ウェブサイトビルダーで作成されたサイトはともかく、コードを書いていくことで作っていく個人サイトであれば、極力このWeb標準を意識すると良いです。
構築段階で失敗しないからです。
デザインやカッコいい動作は後から考えれば良いのですよ。

Web標準とは、主にW3C（World Wide Web Consortium）によって策定された、Web技術に関する標準的な規格やガイドラインのことです。
これらの標準は、Webブラウザやその他の閲覧環境に依存せず、どのような環境でも同じように表示・動作することを目的としています。

Web標準の主な目的

1. 互換性の確保: 異なるブラウザやデバイス間で一貫した表示と動作を保証します。
2. アクセシビリティの向上: 障害のある人々を含むすべてのユーザーがWebコンテンツにアクセスできるようにします。
3. 品質の向上: Webコンテンツの品質を高め、ユーザー体験を向上させます。

代表的なWeb標準

HTML: Webページの構造を定義するマークアップ言語。
CSS: Webページのスタイルやレイアウトを定義するスタイルシート言語。
JavaScript: Webページに動的な機能を追加するプログラミング言語。

W3Cの役割

W3CはWeb技術の標準化を推進するために設立された非営利団体であり、HTMLやCSS、XMLなど多くの仕様を公開しています。
Webの勉強をすれば、必ずと言って良いほど教わる組織ですね。
このような組織が策定する標準仕様があることで、Web開発者は一貫したルールに基づいてWebサイトを構築でき、Webサイトの互換性や品質が保たれます。
Web標準に準拠することで、開発者はより広範なユーザーに対してリッチなインタラクティブ体験を提供することができます。

スクロールを追いかけるボタンの実装

これに関しては、HTML・CSS・JavaScriptでページを分けられないです…余計に分かりにくくなる。
実際に適用する時はCSSとJavaScriptは外部化しています。
CSSとJavaScriptの外部化に関しては…どこで扱おう…？？
CSSとJavaScriptの外部化はレスポンシブデザインみたいに強制事項ではないけど、特別な理由がない限りはやったほうがいいです。
HTMLコードが伸びに伸びて、メンテナンスできなくなりますよ。


<!-- ページ上部へ戻るボタン -->
<button id="scrollToTopBtn" onclick="scrollToTop()">ページ上部へ戻る</button>
<script src="../script/feinScroll.js"></script>

<button id="scrollToTopBtn" onclick="scrollToTop()">ページ上部へ戻る</button>
まずhtmlでページ上部へ戻るボタンを作成しています。
このコードは、クリックすると scrollToTop 関数が実行されるという意味です。

スクロールを追いかけるボタンの実装（CSS）

こちらはCSSですが、もうちょっと短くしようかと思っているところです。
ちょっとここは口調を変えてササっと行きますよ？


/* ●ボタンの設定● */
#scrollToTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, transform 0.3s;
}

#scrollToTopBtn:hover {
    background-color: #0056b3;
    transform: scale(1.1);
}

position: fixed;
ボタンを画面の固定位置に配置。

bottom: 20px;
画面下から20ピクセルの位置に配置。

right: 20px;
画面右から20ピクセルの位置に配置。

display: none;
初期状態ではボタンを非表示。

padding: 10px 20px;
ボタン内のテキストに対して上下10ピクセル、左右20ピクセルの余白を設定。

background-color: #007bff;
ボタンの背景色を青に設定。

color: white;
ボタンのテキスト色を白に設定。

border: none;
ボタンの枠線をなくす。

border-radius: 5px;
ボタンの角を5ピクセル丸く。

cursor: pointer;
ボタンにマウスカーソルを合わせるとポインターに変わる。

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
ボタンに影を付ける。

transition: background-color 0.3s, transform 0.3s;
背景色と拡大縮小の変化を0.3秒でアニメーション。

#scrollToTopBtn:hover { ... }
ボタンにマウスカーソルを合わせた時のスタイルを設定。

background-color: #0056b3;
背景色を濃い青に変更。

transform: scale(1.1);
ボタンを1.1倍に拡大。

スクロールを追いかけるボタンの実装（JavaScript）

JavaScriptは奥が深く、慣れないと難しいです。
私も実装に手間がかかりそうな機能はjQueryみたいなライブラリをよく使ってます。
このページで使っているシンタックスハイライトもライブラリを使ったJavaScriptですよ？
外部にあるコードを読み込んで反映させる仕組みというか。
でも、この程度なら手書きでやっちゃうこともあります。

スクロールを追いかけるボタンを実装するfeinScroll.js


// feinScroll.js
window.onscroll = function() {
    var scrollToTopBtn = document.getElementById("scrollToTopBtn");
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        scrollToTopBtn.style.display = "block";
    } else {
        scrollToTopBtn.style.display = "none";
    }
};

function scrollToTop() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

ここは少し細かく書いていきます。
ライブラリを使うにしても、スタートボタンで実装できるわけじゃないからね。

window.onscroll = function() { ... }
ページがスクロールされるたびに実行される関数を設定しています。

var scrollToTopBtn = document.getElementById("scrollToTopBtn");
ボタンの要素を取得して変数 `scrollToTopBtn` に格納しています。

if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { ... }
ページのスクロール位置が20ピクセルを超えた場合の条件を設定しています。
ここは様子を見ているけど、とりあえず20で良さそう。

scrollToTopBtn.style.display = "block";
ボタンを表示します。

else { ... }
ここでページのスクロール位置が20ピクセル以下の場合の条件を設定しています。

scrollToTopBtn.style.display = "none";
ボタンを非表示にします。

function scrollToTop() { ... }
ページ上部へ戻る関数を定義しています。

document.body.scrollTop = 0;
ページのスクロール位置を上部に設定しています。
ここちょっと迷ってるんだけど、「document.body.scrollTop」は、古いブラウザでスクロール位置を設定するために使われます。
あるいはいらないかも。

document.documentElement.scrollTop = 0;
ページのスクロール位置を上部に設定します。
上で古いブラウザについて書いたけど、「document.documentElement.scrollTop」はモダンブラウザでスクロール位置を設定するために使われます。
この似たような意味の両方の行を含めることで、互換性を確保しているのです。
そこまでしなくて良いかもしれませんが、特にデメリットがないなら、教科書通りにやっておきたいですね。

スクロールトップボタン（Back to Top Button）を作る

すでに似たようなコードを上述していますが、もう少し手を加えたものを書いてみましょう。
こうやって上に戻るようなボタンは普通、スクロールトップボタンもしくは Back to Top Button と呼ばれます。
ユーザーの利便性を高め、サイト全体の使いやすさを向上させるための重要な機能ですよね。

ユーザーエクスペリエンスの向上: 長いページを閲覧しているユーザーが、簡単にページの上部に戻ることができるため、操作がスムーズになります; 特にモバイルデバイスでは、スクロールが煩雑になることが多いため、このボタンがあると便利です
ナビゲーションの利便性: ページの上部には通常、メニューや重要なリンクが配置されていることが多いため、ユーザーがすぐにアクセスできるようになります; ユーザーが迷わずに目的の情報にたどり着けるようサポートします
アクセシビリティの向上: 高齢者や障害を持つユーザーにとって、スクロール操作が難しい場合があります。
このボタンがあることで、より簡単にページを操作できるようになります
サイトのプロフェッショナルな印象: 小さな機能ですが、ユーザーの利便性を考慮したデザインは、サイト全体のプロフェッショナルな印象を高めます
ユーザーの滞在時間の延長: ユーザーがページの上部に戻りやすくなることで、他のコンテンツも閲覧しやすくなり、結果的にサイト内での滞在時間が延びる可能性があります

ただ、こういうのって必須というわけでもないのです。
実際、私のポータルサイトでは付けていません。
これはナビゲーションメニューがスクロールに従って追尾するようになっているからです。
要するに、ユーザーが行き止まりに当たらなければ良いのだと思っていますね。
ブラウザの戻るボタンを押さずに済むよう、レイアウトします。

スクロールトップボタンのCSS


/* ボタンの設定 ●開始● */
#scrollToTopBtn {
    position: fixed; /* ボタンの位置を固定 */
    bottom: 20px; /* 画面下から20pxの位置に配置 */
    right: 20px; /* 画面右から20pxの位置に配置 */
    display: none; /* 初期状態ではボタンを非表示に設定 */
    padding: 10px 20px; /* ボタンの内側の余白を設定（上下10px、左右20px） */
    background-color: #007bff; /* ボタンの背景色を青色に設定 */
    color: white; /* ボタンの文字色を白色に設定 */
    border: none; /* ボタンの枠線をなしに設定 */
    border-radius: 5px; /* ボタンの角を丸くする */
    cursor: pointer; /* ボタンにカーソルを合わせたときにポインターに変更 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ボタンに影を追加 */
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* 背景色、変形、影の変化にアニメーションを追加 */
    z-index: 1000; /* ボタンの重なり順を設定 */
}

#scrollToTopBtn:hover {
    background-color: #0056b3; /* ホバー時の背景色を濃い青色に変更 */
    transform: scale(1.1); /* ホバー時にボタンを1.1倍に拡大 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* ホバー時の影を強調 */
}

@media (max-width: 768px) {
    #scrollToTopBtn {
        padding: 8px 16px; /* 画面幅が768px以下の場合のボタンの内側の余白を設定（上下8px、左右16px） */
        font-size: 14px; /* 画面幅が768px以下の場合のボタンの文字サイズを14pxに設定 */
    }
}

/* ボタンの設定 ●終了● */

アニメーションを付けるtransitionプロパティ

transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
このCSSコードは、要素の特定のプロパティが変化する際に、その変化をアニメーションでスムーズに見せるための設定です。
transition プロパティを使って、次のようなアニメーションを作り出しています。

background-color: 要素の背景色が変わるときに、その変化を0.3秒かけてスムーズに行います。
transform: 要素の変形（例えば、拡大・縮小、回転、移動など）が起こるときに、その変化を0.3秒かけてスムーズに行います。
box-shadow: 要素の影の変化が起こるときに、その変化を0.3秒かけてスムーズに行います。

この設定により、例えばボタンにホバーしたときに背景色が変わったり、ボタンが拡大したり、影が強調されたりする場合、その変化が一瞬でなく、0.3秒かけて滑らかに行われるようになります。
ユーザーに不自然な印象を与えず、視覚的に自然に見える効果があるわけです。
個人サイトを作る過程で余裕ができたら、こういったちょっとしたアクションを加えていくと楽しいですね。

サイトマップ

アナザーエデン関連ページ・サイトマップ

アナザーエデンの強敵戦やストーリーコンテンツのリスト、お勧めバッジなどを掲載したコーナーです。
期間限定のない普通のRPGですので、初心者でも安心して続けていけるゲームとなっています。
もっとも重要なグラスタについては、場所別に網羅した表があります。

個人サイトのホスティングとコンテンツ作成

個人でウェブサイトを作るにはどうすればいいか。
HTML・CSS・JavaScriptの書き方はもちろん、無料かつ広告なしでホームページを作る方法を掲載したコーナーです。
Webデザインやレイアウトについても書いてあります。

魚釣りなどアウトドアのエリア

ゲームとパソコンだけじゃなく、アウトドアも趣味なんです。
このコーナーでは魚釣りの記録とか、魚料理のレシピ、はたまたサイクリングなどなど。
アウトドアに関連するコンテンツが詰め込まれています。