[jQuery]jQueryを使って外部htmlを任意の場所に読み込む

お久しぶりの更新です。

今回は表題の通り、珍しくjQueryとかやっちゃいます。

なぜこんなことをすることになったか？
そこで考えたこと
1. html
  1. 解説
まとめ

なぜこんなことをすることになったか？

事の発端の案件はこんな感じ。
某団体様のWEBサイトの案件で、サーバーは既に用意されてありイマドキphpとかは動かない。スタティックなhtmlでの制作しか方法がないとのこと。
サーバーの変更はNG。
でも更新はおじいちゃん達が頑張ってやります！とのこと。保守更新の予算がない・・・
更新はホームページビルダー使う。

そこで考えたこと

おじいちゃん達に運営を頑張っていただきたく、できるだけ簡単に更新ができるようにレイアウトにかかるファイルは開かせないようにしてしまおうってことで、表題の通りです。

では、早速。
index.htmlにnews.htmlを読み込んで新着情報を更新。

html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>sitename</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> //jQueryの読み込み
		<script src="js/to-top.js"></script>
                <script>
                //news読み込み
                $(function(){
                    $("#news").load("news.html");
                })
                </script>
	</head>
	<body>
            <div id="news"></div>　//ここにnews.htmlを読み込みます
	</body>
</html>

解説

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

jQueryの読み込み
今回はGoogle Hosted Librarisを使いました。

$(function(){
    $("#news").load("news.html");
})

id、newsにnews.htmlを読み込むようにjsを。

<div id="news"></div>

実際に読み込む場所を作ってあげてできあがり。

news.htmlは適当に作ってください。

まとめ

エンドユーザーのために、CMSを使えない環境のために、試行錯誤することは大事なことですね。
この方法でしたら、最悪news.htmlがグチャグチャなるだけで済みますし、メンテナンスもやりやすいです。
Dreamweaverのテンプレート機能を使えないケースでも共通部分をjQuery化してしまえば良さそうですね。