PHPとJavaScriptを連携する

１．はじめに

　個人環境でジュークボックスサーバーを動かしていて、サーバー(Linux)上のSAMBA領域にあるmp3ファイルをブラウザ(Chrome)で連続再生させるといったことをやっています。ブラウザ上ではChromeのMusicオブジェクトを使い、再生するのと同時に楽曲情報のテキストを表示させています。
　HTMLのFORM文を使うといちいち操作介入が必要になりますが、それだと煩わしいので１曲再生終了したら自動的に次のリクエストをサーバーへ送り、同時に楽曲情報を取得したいところです。再生の方はmusicオブジェクトにURLを渡して後はお任せなのですが、楽曲情報については、別途リクエストしなければなりません。
　これを実現するためブラウザ側ではJavaScriptでサーバー側に用意したAPIからXMLHttpRequestを使い、JSON形式の楽曲データを取得させました（下図）。取得したデータは動的HTMLでブラウザの表示に反映させます。

２．サーバー側のコード（API）

　いわゆるAPIになりますが、PHPで実装しています。シンプルにアーティスト名、アルバム名、楽曲名を返しています。可能であれば再生時間も返したかったのですが、mp3の提供系によってID3タグに埋め込んであったりなかったりなのでそこはあきらめました。

<?php
//addInformation.php
  $postedId = $_GET["id"];
  $arrLine = getMP3Info($postedId);
  $responce = "{\"artist\":\"".$arrLine[2]."\",\"album\":\"".$arrLine[3]."\",\"title\":\"".$arrLine[4]."\"}\n";

  header( "Server: JukeBox");
  echo $responce;
?>

　エラー処理などは省いています。getMP3Info()はリクエストされたidから楽曲情報を配列で返す関数で、本稿ではそちらの実体定義は省略します。getMP3Info()が返す配列情報をJSON形式に（強引に）整形しています。大抵はjson_encode()を使うところですね。
　header()はブラウザ側でのデバッグ用に入れ込んだ意味合いが強く、無くても大丈夫なはずです。本体はecho $responce;で、ここでJSONコードを返しています。適当なidを指定してブラウザで直接このURLにアクセスすると、ブラウザにはただJSON形式の文字列が表示されます。

３．クライアント側のコード（JavaScript)

　クライアント側はJavaScriptで先のAPIにアクセスします。アクセスにはXMLHttpRequestを使い、利用者の操作介入は必要しない作りとしました。どちらかというとサーバーよりもクライアント側のコードの方が分量があり、煩雑になるため当該のリクエストを実行する関数だけを抜粋します。

 function getMP3Info(idx){
   var xmlHttp = new XMLHttpRequest();

   console.log("xmlHttp: " + xmlHttp.readyState);
   xmlHttp.onreadystatechange = function (){
     console.log('get Information'+ " idx: " + idx);
     if (xmlHttp.readyState == 4) {
       if (xmlHttp.status == 200) {
         var dataJson = xmlHttp.responseText;
         var data = JSON.parse(dataJson);
         document.getElementById("controlArtistName").innerText = data.artist;
         document.getElementById("controlAlbumName").innerText =  data.album;
         document.getElementById("controlTitleName").innerText =  data.title;
       }
     }
   }
   xmlHttp.open("GET", "https://jukebox/addInformation.php?id="+idx);
   xmlHttp.send();
  }

　getMP3Info関数は単純です。id(idx)を与えるとサーバーのAPIにGETメソッドでアクセスし、得られたJSONデータを個別のパラメータに展開して動的にHTMLを更新しています。この関数はイベント（任意の曲がクリックされた、楽曲の再生が終わった、等）が発生したタイミングで呼ばれる作りになります。

４．おわりに

　今回紹介したAPIは完全にプライベート空間で使っているためシンプルな作りになっていますが、一般的なものとして外部公開することを前提にするのであれば、利用者の認証処理や、不正なリクエストへの対応処理などが必須となってきます。むしろ、難しくAPI作製のキモになるのはそちらではないかと思いますが、PHP⇔Javascript間のデータ連携の参考例になれば幸いです。