Web Artisan Blog - ウェブ アルチザン ブログ

まず、scriptタグのsrc属性ですが、
これにはjsファイルだけなく、php等も指定できます。
つまり、
<script type="text/javascript" src="〜.js"></script>
だけでなく、
<script type="text/javascript" src="〜.php"></script>
という指定もできるのです。

素早い人は、この時点で「あーなるほど」となるのでしょう。
「php側でechoなんかで出力すれば、その内容がHTMLに反映されんちゃうの？」

・・まあそうなんですが、ここでPHP側で注意する点があります。

で、実際、簡単なプログラムを作ってみました。
まず、”jsphptest.php”というPHPを用意し、
しょーもない処理ですが、このPHPの”param”というパラメータに、
”1”を渡せば、「WEB Artisan」、
”2”を渡せば、「RESTARTSYSTEM」、
と出力されるというものにします。
で、こいつをさっきのscriptタグで呼び出すとどうなるか？

■ソース
<script type="text/javascript" 
src="http://www.res-system.com/weblog/media/1/jsphptest.php?
param=1"></script>

■結果


・・ちゃんとなってますねえ。。
ここで、PHPのソースから注意点を・・。

■ソース(jsphptest.php)
<?php

    $param = $_GET['param'];

    //（注１）
    header("Content-type: application/x-javascript");

    //（注２）
    if ($param == '1') {
      echo "document.write(¥"WEB Artisan¥")";
    } else {
      echo "document.write(¥"RESTARTSYSTEM¥")";
    }

?>

（注１）
これが一番の注意点ですが、
headerには、application/x-javascriptを指定します。
これでないと、PHPが出力した内容はHTML上に出力されず、
scriptエラーとして判断されます。

（注２）
出力する際は、JSを意識して出力します。
つまり、PHPの出力結果は、その処理イメージを考えると、
HTML上でなく、JS上に出力される訳です。
で、JSがHTML上に出力するにはdocument.writeで行うので、
PHP側でも、この関数付きで出力します。


このように、
scriptタグのsrc属性にphpを指定する事で実現できるのですが、
最初に述べたように、srcにjsファイルをしている場合はどうなのか？？

全てではないですが、結局、そのjsも更にphpを呼んでいる事でしょう。
実際やってみると、

■ソース
<script type="text/javascript"
 src="http://www.res-system.com/weblog/media/1/jsphptest.js"></script>

■結果


・・ちゃんとなってますねえ。。
ここで、jsのソースから注意点を・・。

■ソース(jsphptest.js)
document.write('<script type="text/javascript"
src="http://www.res-system.com/weblog/media/1/jsphptest.php?param=1">
</script>');

・・つまり、結局、サーバー上のjsファイルでは、
そこから更にscriptタグのsrcにphpを指定して、
それをdocument.writeしている訳です。。。


・・まあ、これは一例ですので、
これ以上の素晴らしい仕組みでサービス提供しているサイトも多いです。
ただ、使う側は単にscriptを埋め込むだけですが、
サービス側はいろいろやってんだなと、、
更には、src属性にjs以外も指定できるんだなという事で。。。

しかし、この仕組みも使い様によっては、いろいろ出来ると思います。
これによって、htmlファイルといった静的なページでさえ、
外部phpと組み合わせる事で、動的に変えられる訳ですからね。。。


■動作テストのダウンロード
ダウンロードしたphpファイルをサーバーにアップロードしてください。
＞＞ダウンロード（srcにphp指定）
＞＞ダウンロード（srcにjs指定）

＜関連記事＞
＞JS(JavaScript)で取得できるクライアント情報、そこからアクセス解析の仕組みを考えてみる