スクリプトを外部ファイルに分ける

広告

Google Maps APIを使用することで、単にWebページ上に地図を表示するだけでなくマーカーを設置したり地図上でクリックされた時に独自の処理を行ったりといったことが可能になります。これらの機能を実現するために独自のスクリプトを追加していくことになるのですが、あまりWebページに長文のスクリプトを記述すると可読性が悪くなる場合があります。そこでこのページではスクリプトを外部ファイルに分けて記述す方法について解説します。

1.CDATAセクション
2.スクリプトを外部ファイルとして用意する
3.サンプルコード

CDATAセクション

前のページにてGoogle Maps APIを使用する場合の基本的な構成の例をご紹介しましたが、その中でGoogle Maps APIに関する部分は次のところです。 

<script type="text/javascript">
function initialize() {
  var latlng = new google.maps.LatLng(35.709984,139.810703);
  var opts = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}
</script>

JavaScriptを使って記述していますので、XHTMLページの中にJavaScriptコードを記述する場合、「<」や「&」などの文字を「&lt;」や「&amp;」のようにエスケープして記述するか、または次のようにJavaScriptのコードをCDATAセクションの中に記述します。詳しくは「XHTMLファイルでのスクリプトの記述」を参照して下さい。(XHTMLの場合です)。 

<script type="text/javascript">
//<![CDATA[
function initialize() {
  var latlng = new google.maps.LatLng(35.709984,139.810703);
  var opts = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}
//]]>
</script>

現在は地図を表示しているだけなのでまだスクリプトの部分が短いですが、地図に色々な機能を追加していくとスクリプトの部分がどんどん長くなってしまいます。あまりWebページ内にスクリプトが長くなると可読性に問題が起きることもありますので、Google Maps API用のスクリプトの部分は外部ファイルに分けておくと便利です。

スクリプトを外部ファイルとして用意する

まずは新しくテキストファイルを作成し、Google Maps APIに関するスクリプト部分をそのファイルに記述します。この場合、CDATAセクションの中に記述する必要はありません。例としてsample.jsというファイル名にして保存しておきます。 

function initialize() {
  var latlng = new google.maps.LatLng(35.709984,139.810703);
  var opts = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}

次にWebページから先ほど作成したsample.jsファイルを読み込むように記述します。 

<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=false">
</script>

<script type="text/javascript" src="sample.js">
</script>

このようにGoogle Maps APIに関するスクリプトを別ファイルに分離し、元のWebページからその分離したファイルを読み込んで利用することができます。

サンプルコード

では簡単なサンプルを作成して実際に試してみます。下記のサンプルでは独自コードの部分を外部ファイルに分離しています。 

function initialize() {
  var latlng = new google.maps.LatLng(35.361056,138.731918);
  var opts = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="robots" content="noindex,nofollow,noarchive" />
    <title>Google Maps サンプル</title>

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=false">
    </script>

    <script src="./js/code2_1.js" type="text/javascript"></script>

  </head>
  <body onload="initialize()">
    <p>自宅の地図です。</p>

    <div id="map_canvas" style="width:500px; height:300px"></div>

  </body>
</html>

ブラウザでWebページを開くと次のように表示されます。

p2-1

今後作成するGoogle Maps API用のスクリプトについては基本的に外部ファイルに記述するようにします。

( Written by Tatsuo Ikura )