すずろぐ

人生大逆転を目指す、鈴木俊吾の成長日記

JavaScript jQueryで外部ファイルを読み込む方法

プログラミング

こんばんは、鈴木俊吾(すずしん)です。

あなたは何かホームページを作るときに…。 共通した処理をまとめて外部ファイル化しておいて、メインのファイルから読み込むという方法を取りたいと思ったことはありませんか? 例えば、ホームページならヘッダー・サイドバー・フッターなどが共通化できますね。

今回の記事では、JavaScript、特にjQueryを使ってこの外部ファイルを読み込む方法について書いてみようと思います。 ホームページ作りをしている方の参考になれば幸いです。

PHPが使える場合

もしPHPが使えるサーバーを使用しているのであれば…。 例えば、include関数やrequire関数などを使えば簡単に読み込みが可能です。 これなら特に何も考えること無く手軽に利用できますね。

[php] <?php include(‘header.php’); ?> [/php]

PHPが使えない場合

問題はこちらです。 基本的に、無料で使えるホームページスペースによくあるパターンです。 PHPは使えないけれど、JavaScriptなら使えるという場合ですね。

その場合、外部ファイルの読み込みは基本的にJavaScriptで行うことになるのですが…。 今回はjQueryを使って外部ファイルを読み込む方法について書いていきます。

include.jsの作成

ここでは、外部ファイルの読み込みを自作のinclude関数で行うことにします。 以下のコードをコピペして「include.js」という名前で保存して下さい。 divタグを書き出してから、jQueryのload関数をつかって外部ファイルを読み込んでいます。

[js] function include(id, file) { document.write(‘<div id="’+id+‘"></div>’); $(‘#’+id).load(file); } [/js]

include.jsを作成したら、FTPソフトを使ってお使いのサーバーにアップロードしておいて下さい。 そのアップロード先のパスをよく覚えておいて下さいね。

jQueryとinclude.jsの読み込み

include.jsを使いたい場合、まずjquery.min.jsを読み込みます。 ここではGoogleのCDNから読み込んでいます。 そして、その後にinclude.jsを読み込んで下さい。 メインとなるファイルの<head>~</head>の間に以下のコードを記述して下さい。 この時、(path of your include.js)には、あなたがアップロードしたinclude.jsのパスを記述します。

[html] <script src="">https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> <script src="http://(path of your include.js)"></script> [/html]

include関数の呼び出し

メインとなるファイルでは、外部ファイルを読み込みたい部分でinclude関数を呼び出します。 例えば、サイドバーの外部ファイル(/sidebar.html)を読み込みたい場合には以下のようにします。

[html] <script type="text/javascript"> include("sidebar", "sidebar.html"); </script> [/html]

基本的にはこれだけです。 そんなに難しくはありませんよね? 必要に応じて他の外部ファイルも読み込みましょう。

まとめ

今回の記事では、jQueryを使って外部ファイルを読み込む方法について書いてみました。 具体的にはinclude.jsを作成して、include関数を呼び出すということで実現しています。

無料のホームページスペースを使っていて、外部ファイルの読み込み方法で困っているそこのあなた! ぜひ今回の方法を試してみてはいかがでしょうか? 比較的お手軽にできると思いますよ♪