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

PHP:JS(JavaScript)からPHPを呼び出しHTML上に出力する方法

PHP

2004年12月22日

Research Artisan Pro ←リサーチアルチザンがパワーアップして復活しました!!
”アクセス解析”や”RSS Feed(ブラウザ上のRSSリーダー)”、
これらを提供するサービスサイトに行けば、大体が下記のような、
生成されるJS(JavaScript)のコードをHTMLに埋め込んでと言われます。

<script type="text/javascript" src="〜"></script>



このscriptタグのsrc属性の部分には、
各サービスサイト上のjsファイルが指定されている事が多いです。
仕組み的には、そのjsファイル内で、
更に各サービスサイトのcgiやphp等のサーバープログラムを呼び出しています。
こうする事は、そのサービス処理の仕組みを隠蔽する意味合いもありますが、
大きな意味は、
”ユーザーがJSコードを埋め込むだけで、各サービスを導入する事が出来る”
ここにあると思います。

また、”RSS Feed”のようなサービスについて考えると、
”ユーザーがJSコードを埋め込むだけで、その部分が動的に変わる事が出来る”
のです。

さて、そのjsファイルですが、
先に述べたように、そこから更にサーバープログラムを呼んでいる訳で、
「ほな、JSとサーバープログラムってどう関わってんねん?」
っていう事になります。。
では、これらの事をサーバープログラムをPHPに特化して簡単に考えてみます。
まず、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'];

    //(注1)
    header("Content-type: application/x-javascript");

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

?>



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

(注2)
出力する際は、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)で取得できるクライアント情報、そこからアクセス解析の仕組みを考えてみる