Document

JSONで
JavaScriptを256%活用しよう！
JSON -XMLより軽量なデータ交換フォーマット –
アル・デザインワークス
新出純壱
はじめに
2007年、最も重要な言語は
JavaScript（ECMAScript)
である！
なぜJavaScript？

Ajax ：
（JavaScriptによる非同期通信）

Windows
Vista “Gadget” :
実は、現在最も多くのPC上で
（JavaScript版デスクトップアプレット）
動作する言語である
 Windows Live :
（JavaScriptで書かれたOS）

Google, Yahoo が無償ライブラリを提供
JavaScriptはビジネスになる
仕事が来たときに
「知りません」
では話にならない。
最重要キーワード
ＪＳＯＮ
(JavaScript Object Notation)
今日はこのキーワードだけ覚えて帰ってください。
と、その前に
最近のWebアプリの特徴

JavaScriptが非同期にサーバ通信(Ajax)。
 ページ切替なしに画面を更新。
情報要求（非同期）
クライアントーサーバ型
アプリケーション
情報返却
XMLを使ったデータ交換
p=dom.getElementsByTagName(“person”);
name = p[0].getAttribute(“name”);
 DOMは複雑。
 APIのメソッド名を毎回忘れてググる。

→ＪＳＯＮの登場
JSONとは

こんな形式です。
{
“name” : “FITEA”,
“url” : “http://fitea.org”,
・・・・
}

※値に{}を指定してネスト構造も可能
JSONの凄さ

JavaScriptの言語仕様としてサポート
 例）
var person = { “name” : ”FITEA” };
alert( person.name ); // 「FITEA」と表示
JSONの利点
開発が容易
 データ処理が高速

『ジェイソン最高』
注意：クロスドメイン通信

JavaScriptは自サイト以外との通信不可
（XMLHTTPRequestの制限）
 解決策1: 自サイトにプロキシを置く方法。
※Windows Live Gadget
解決策2:
ＪＳＯＮＰ
JSONP

リクエストURLをscriptタグで書く。
<script src=“http://～” type=“text/javascript”></script>

JSONを関数呼び出しの中に入れる
callback( {“name”:”FITEA”} )
サーバへのリクエスト
＝callback関数の呼び出し
JSONP

scriptタグを使ってクロスドメイン通信を実
現する手法です。
 「ブログパーツ」
JSONの注意事項
信頼のおけるサーバとのみ通信
 あくまで「裏技」的なテクニック
 しかし当面は利用され続けると思われる

おまけ：JavaScriptという言語
極めがいのある本格的な言語
 「クロージャ」が使える。
 「継続（ジェネレータ・イテレータ）」も次の
バージョンで使える。
 オブジェクト指向言語以外の世界。
（関数型言語）

まとめ
時代は凄い勢いでWebへシフト中。
 新技術の日頃のキャッチアップが重要。
 Google Maps API
 Yahoo Search Web Service

ご清聴ありがとうございました
アル・デザインワークス
新出純壱

Download Report