JavaScriptを外部ファイル化してブログで使う方法

さて今回は、ファイル形式で公開されているJavaScript(ジャバスクリプト)を、外部ファイル化してブログで利用する方法をご紹介します。

アクセス解析タグのように、ただ単純にコピペして貼り付けをすれば使えるスクリプトもありますが、ファイル形式のものをダウンロードして使うスクリプトの場合は少し手間が必要になります。

例えば右記のような画像拡大のスクリプト。

あるいは下記のようにタブで表示の切り替えができるスクリプトなどはそれなりに記述も多く、単純に「コピペして完了」とはいきません。

１．このように、ここの　２．リンクをクリックすると　３．内容が変わります

Googleへ
Yahoo!へ
MSNへ

小スペースに色々な内容が詰め込めます。文字だけではなく写真の表示もできます。

　歩ける寝袋です。

スクリプトを用意する

まず、ブログに追加したい機能のスクリプトを入手します。

スクリプトの配布サイトでは、ファイルをダウンロードする所と、スクリプトのソースコードだけを公開してる所の主に２種類があります。ダウンロードしたスクリプトのファイルの中身には、大抵の場合で以下のような色々な形式のファイルが入っています。

このうち配布サイトで指示されているファイルだけをアップロードして使用するわけですが、一般的には画像ファイル、Jsファイル、CSSファイル（カスケードスタイルシート）を使用します。

加えてあとで記事部分に記述するHTMLも必要になりますので、<body>～</body>にどのように記述すればよいのか、配布サイトで公開してるHTMLをメモ帳などにコピペしておきましょう。

一方、スクリプトのソースコードだけを公開してる所は、一旦メモ帳に「名前をつけて保存」しファイルの拡張子を「.Js」へ変更して利用します。スタイルシートの場合は、「.css」とします。

Js、CSS、画像をアップロード

ファイルがそろったら、拡張子が「.Jsや.css」、または「.gifや.pngや.jpg」となっているファイルをそれぞれアップロードします。

アップロードする場所がない場合は、ＦＣ２ブログかＦＣ２ホームページが、それらのファイル形式の無料アップロードに対応しています。そこから別のブログ、たとえばこのBloggerでも使うことができます。

まず、ダウンロードしたJsファイルの中に画像ファイル（gifやpng）が含まれている場合ですが、アップロードした画像ファイルのURLをCSSファイルの指定場所に記入しましょう。これを怠ると画像ファイルが表示されません。

・サンプルコード

(../image.gif)

指定場所というのは、上記のように画像URLの拡張子が画像ファイルになっている部分です。自分でアップロードした画像URLに書き換えて保存します。

その後、CSSファイルもアップロードします。CSSファイルをアップロードしたら、下記のサンプルコードのhref＝' 'の部分にURLを記入し、<HEAD>～</HEAD>内に記述します。

・サンプルコード

<link href='ここにアップロードしたＣＳＳファイルのＵＲＬ' rel='stylesheet' type='text/css'/>

しかしCSSファイルは、すでにブログで使っているスタイルシートへ 単純にコピペした方が早い と思います。

現在はほとんどのブログがスタイルシートに対応しているはずですので、既存のスタイルシートを利用すれば後々デザインを変更したい場合にすぐに対応できます。ですので、上記にあるCSSのアップロード手順は、既存のスタイルシートを簡潔に保ちたいような場合にのみ実施すると良いと思います。CSSファイルは、原則コピペ推奨です。

次にスクリプト（Jsファイル）ですが、スクリプトは手を加えずにそのままアップロードしてください。

HEADへスクリプトを記述する

実際のところ、スクリプトについてもアップロードせずにそのままHEAD内にコピペするだけで動作します。しかしスクリプトの文字の羅列だけで数百行も占領してしまっては、HEADの中が醜くなってしまいます。

ちなみにそのまま貼り付ける場合は、下記のような記述でスクリプトのソースコードを囲み、HEAD内にコピペします。

・サンプルコード

<script type="text/javascript">

ここに「var や function」と記述されてるようなスクリプトのソースコードを入力

</script>

しかし一般的には、別の場所にアップロードしたスクリプトファイルを読み込んでいるサイトの方が多いです。このことを「外部ファイル化」と言いますが、これは下記のコードをHEAD内に記述するだけですので、必要なスペースは1、2行で済みます。

・サンプルコード

<script src='ここにアップロードしたJsファイルのＵＲＬ' type='text/javascript'/></script>

スクリプトの利用を宣言する

記事部分（body）に記述する内容は、それぞれのスクリプトによって異なります。通常はスクリプトの配布サイトなどで、<body>～</body>の間に記述するよう指示されているものがそれです。

例えば<div class="　">　</div>のように、class="　"属性でスクリプトの利用を宣言するようなものが多く目立ちます。

また、スクリプトはブログのプレビューや下書きの段階ではうまく動作しない場合もありますので、動作しない場合は試験的に公開したページでテストしてみてください。

思い出せ.com

ラベル