Blog

jqueryを使ってwebサイトの共通部分をパーツ化する

2014.10.21Cat:jQuery デザイナー

webサイトのコーディングをしている際、複数のページを製作途中でヘッターやフッターといった共通の部分が変更になることがよくあります。

結局はCMS化する部分なんですが、変更になった部分を全ページに反映させてほしいという要望があります。(そういう要望の方が多いです。)こちらとしては、どこかのページさえあってればもう十分だとは思うのですが、CMS化の概念がわからないと十分だということもよくわからないかと思います。

とはいえ、全ページを反映させるのは手間なので、コーディングの段階からCMSっぽくパーツ化してしまう方がいいのかもしれないと思う次第になってきました。

いろいろな方法があるのですが、今ままで僕が知っていたものは、phpで書く、javascriptで無理矢理挿入するといったものですが、それぞれ問題点がありました。

今回は、手間も問題も少ないものを紹介したいと思います。

それは、jqueryのajaxを使用する方法です。

デモは以下になります。

DEMO

DEMOではload.jsに読み込ませる記述があります。

jqueryのajaxを使って共通部分をパーツ化する

まずは、当たり前ですが、jqueryを読み込みます。

そして,head内に、以下のように書き込みます。

これだと、の直後に入る感じですね。
これだけです。

header.htmlのリンクは、読み込んでいるファイルからになります。

jQueryのloadだともっと簡単にできますが、エラーの処理等はないのと、読み込ませる場所の指定がajaxの方がしやすい感じがするので、こちらの方がいいのかと思ってます。

問題点

問題点としては、
google chromeのローカル環境で見られないことです。
(errorの処理になってしまいます)

それぐらいなので、他の方法よりは問題は少ないと思います。
CMS化する際もパスを変更するぐらいでそのまま移行できますしけっこう良いかと思います。

一応chromeでも見れるようにする方法があるようです。

【小ネタ】Chromeのローカルセキュリティポリシーの回避 | Developers.IO

Google Chromeの起動オプション

ちなみに共通化させる他の方法としては、以下があります。
更新するのが面倒!サイトの共通部分を簡単に作る様々な方法|WEB Drawer

いずれはもっと簡単な方法がなにか出てきそうな気がしますね。。。

余談ですが、
アイキャッチの画像は、
以下からダウンロードしてきました。

JÉSHOOTS | Photos for business or personal use in high resolution for free

以下から発見しました。
10 More Websites for Free Stock Photos

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ