セキュリティ対策と他の言語でのJSONサポート
JSON文字列の解析はeval関数を使用するのと同じぐらい簡単だということがお分かりいただけたと思います。そのeval関数には、あらゆるJavaScriptコードを無条件に実行するという問題があります。データの由来が不明な場合、これは問題を引き起こしかねません。同じWebサーバーではない、サードパーティが提供するデータを使う場合はなおさら危険です。このような場合は、JavaScriptの組み込み関数であるevalではなく、JSONパーサーを使うのが賢明です。JSONパーサーは、（あらゆるJavaScriptコードではなく）JSONテキストのみを受け取るので、はるかに安全です。ほとんどの言語にJSONパーサーが用意されています。JSONの公式Webサイトで入手できるAPIは、PHP、Java、C#などのほとんどの言語に対応しており、1、2行のコードを追加するだけでJSONテキストの解析を簡単に処理できます。JSONテキストの解析をクライアント側で安全に行うための、JavaScriptで実装されたオープンソースのJSONパーサーもあります。また、独自にパーサーを追加したとしても、その作業はとても単純です。実際、JSONテキストのエンコードとデコードは数行のコードで処理できます。
例えば、JSONテキストをJavaScriptコードに変換するには、次のようにparseJSONメソッドを使います。
var myObject = myJSONtext.parseJSON();
また、JavaScriptデータ構造をJSONテキストにシリアル化するには、toJSONStringメソッドを使います。
var myJSONText = myObject.toJSONString();
toJSONStringメソッドでは、変換中に二重引用符などの特殊記号もエスケープされます。
この記事では、JSONを使うことでAJAX Webアプリケーションのコードを単純化できることを説明しました。この記事のサンプルアプリケーションは、ObserverパターンをJavaScriptで実装したカスタマイズ性の高いニュースティッカーの開発手順を示しています。Observerパターンは、アプリケーションの拡張性を向上します。例えば、一定の時間が経過するごとにニュース項目を表示するobserverコンポーネントを新たに作成して追加できます。必要な作業は、別のJavaScriptクラスを作成し、ニュースを表すJavaScript配列を受け取るupdateメソッドにロジックを追加することだけです。その後で、この新しいobserverオブジェクトをobservee（つまりContentRetriever）に追加できます。このオブジェクトをContentRetrieverのコンストラクタに渡すのが、1つのやり方です。
var marquee = new Marquee(...); var newTicker = new NewTicker(...); var contentRetriever = new ContentRetriever("./tickerDataRetriever.php", [marquee, newTicker]); ... contentRetriever.getContent();
あるいは、ContentRetrieverのattachメソッドを使ってobserverを追加することもできます。
var marquee = new Marquee(...); var contentRetriever = new ContentRetriever("./tickerDataRetriever.php", [marquee]); ... var newTicker = new NewTicker(...); contentRetriever.attach(newTicker); ... contentRetriever.getContent();
サンプルコードの実行
この記事では、さまざまな領域（JSON、AJAX、JavaScript、Observerパターン、CSS）に触れたため、コードを1行ずつ詳しく解説することはできませんでした。その代わりに、この記事のサンプルコードに完全なコメントを付けたものを無償でダウンロードできるようにしましたので、説明しなかった部分のコードをご自分で調べてみてください。最後にひとこと。この記事のPHPコードは、Apache HTTPサーバーなどのWebサーバーで実行する必要があります。例えば、コードをTickerフォルダに格納した場合は、次のようなURLでこのフォルダを呼び出せます。
http://localhost/Ticker/demo.htm
言うまでもなく、このURLはご使用の環境に合わせて変える必要があります。
