BOOKS
by Sukeharu Kano / 狩野祐東 著書

サンプル03-07、05-01〜04が動作しない場合の対策

2014-06-10

読者の方からの報告によると、第3章のサンプル03-07や、第5章のサンプル05-01〜05-04が動作しない場合があるようです。多くの場合JSONファイルが正しく読み込まれない、より正確にはJSON形式のデータが正しく認識されず、パースに失敗することが原因だと考えられます。パースとは、読み込んだデータをスクリプトで利用可能な形に変換する処理のことをいいます(「作りながら学ぶjQueryデザインの教科書」P.197)。JSONデータの場合は、JavaScriptオブジェクトに変換されます。

 JSONデータが正しく読み込まれないとサンプルが正しく動作しません。サンプル03-07ではボタンをクリックしたのに写真やテキストが表示されません。第5章のサンプルの場合はテーブルが表示されなくなります。こうした問題が起きた場合は、次のようにスクリプトを書き替えてみてください。

$.get()の代わりに$.getJSON()を使用する

 本書に掲載しているサンプルプログラムでは、JSONデータの読み込みに$.get()メソッドを使用しています。これはデータを読み込み、データの型式を自動的に判別して適切な処理を行う便利なメソッドですが、なんらかの理由で判別に失敗することがあります。

 うまく読み込まれない場合は、$.get()の代わりに$.getJSON()を使用してみてください。$.getJSON()は、読み込んだデータを強制的にJSONとしてパースするメソッドです。ソースの書き替え方は下記のとおりです。例はサンプル03-07-aをもとにしていますが、03-07-b、03-07-c、第5章の全サンプルも同じように書き替えます。

$(function(){
	$('#fetch').on('click', function(event){
		event.preventDefault();
		$this = $(this);
		var ajaxUrl = $this.attr('href');
		$.getJSON(ajaxUrl, function(data) {//getをgetJSONに書き替え
			console.dir(data);
		});
	});
});

なぜパースされないの?

 おそらく、お使いのWebサーバーに.jsonファイルのMIMEタイプが設定されていないためだと考えられます。.htaccessが利用可能な環境であれば、下記のように書かれた.htaccessファイルを用意し、Webサイトのルートディレクトリに保存しておけば、WebサーバーにMIMEタイプが設定されます。Webサイトのルートディレクトリにすでに.htaccessがある場合は、そこに追記してかまいません。

AddType application/json .json

 Webサーバーで使用する.htaccessやMIMEタイプについては、次のサイトなどを参照してみてください。

狩野 祐東

Web/アプリケーションUIデザイナー、エンジニア。執筆家。 アメリカ・サンフランシスコに留学、UIデザイン理論を学ぶ。Webサイトやアプリケーションのデザイン・開発、関連技術書籍の執筆を数多く手がける。株式会社Studio947代表。