初心者向けホームページ作成講座
フリーソフトでホームページを作ろう!
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
t-1.png(323 byte)

外部JavaScriptの活用

(更新日 08/12/04)

 このページではJavaScriptを外部のファイルに記述して、ウェブブラウザで閲覧した時にそのファイルに記述してあるJavaScriptを実行させる方法を説明していきます。JavaScriptを外部ファイル化するメリットとしてはHTMLソースをすっきりさせる事ができる他、WYSIWYG型エディタなどによるソースの書き換えを回避する事ができます。

JavaScriptの外部ファイル化

 JavaScriptの外部ファイル化は、下のようなJavaScriptがページ内にある場合にこれを外部のファイルに記述して、ページを閲覧した時にそのJavaScriptを実行する事ができます。外部化する方法は赤文字の部分を除いたJavaScriptのコードをテキストファイルに記述し、半角英字で名前を付けて拡張子の部分を「js」として保存します。

<script language="JavaScript"><!--
document.write(navigator.appName);
// --></script>

 そして外部に記述したJavaScriptを呼び出すにはHTMLソース内に以下の記述を任意の箇所に挿入しておくだけです。「src=""」の中には外部化したJavaScriptファイルの名前を入れておきます。

<script language="Javascript" src="ファイル名.js"></script>

 これでJavaScriptの外部ファイル化が完了。上の例ではJavaScriptのコードが短いので外部化するメリットがあまりありませんが、長い場合には外部化する事でHTMLソースを整理する事ができます。

Flashのソースを外部JavaScriptで呼び出す方法

 さて、Flashなどをページに挿入する場合はHTMLソースがかなり複雑で長くなってきます。そこで、上と同じような方法でFlashを挿入するタグも外部ファイル化してしまいましょう。ここではJavaScriptの「document.write();」を使って外部ファイルに記述したHTMLタグを呼び出す方法を使います。

 上で紹介した方法と同じようにテキストファイルに対して下のようにFlashのタグを「document.write();」内に挿入します。「document.write();」はページを表示した時にその中身の文字やHTMLタグを書き出すという意味。Flashのタグにファイル名やサイズが2つ必要なのはIE用の「object」と非IE用の「embed」タグが必要だからです。

document.write(
<object classid= "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0"
width="横幅" height="高さ">
<param name="movie" value="ファイル名" >
<param name="quality" value="high">
<param name="bgcolor" value="背景色">
<embed src="ファイル名" quality="high"
bgcolor="背景色" width="横幅" height="高さ" align=""
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"></object>
);

 上をそのままコピー&ペーストしても使用できません。外部JavaScriptファイルに上のソースをコピペして使用する場合は改行を全て取り除いて下さい。もしくは改行している箇所を全て「document.write();」で囲むという方法もあります。他に改行部分に対しては正確な記述方があるのですが、ややこしくなるので省略させて頂きます。

 同じようにFlashを挿入したい場所に以下の記述をHTMLソース内に入れます。

<script language="Javascript" src="ファイル名.js"></script>

 これでFlashタグの外部ファイル化が完了です。この方法はFlashタグに限らず他のタグも外部化する事が可能なので色々と活用してみて下さい。

広告
t-2.png(196 byte)