傲慢SE日記 ~個人事業主として獅子奮迅中(TownSoft)~

40間近のフリーランスなSE日記です。TownSoftという屋号で仕事をしてます。仕事の依頼も受けてるよ!→http://townsoft.jp/


テーマ:
仕事でJSONPを使うかもしれなくていろいろと調べてみた。
しかし、、、なんだかこ難しいページしか見つからなかったので初心者向けにここに書いておく。
今使っている言語がRubyなので説明はRuby(Rails)で行うが、別にどの言語で行っても良い。

そもそもJSONPってどんな時に使うのか?
まぁ、このページに行き着いた人なら真っ先にクロスドメインが思い浮かぶだろう。
一般的に「ページの遷移は行わないけれどページの一部を更新したい」場合に使用する技術がAjaxと呼ばれている。
このAjaxを使ってブログパーツのようなものを作ろうと言った時に行えなくて生まれた技術だ(多分)

例えば、自分のブログがとても人気があって世の中に広めたいとする。
その時に他の人のホームページの端の方に検索フォームをおいてもらって検索結果までを出すパーツをAjaxで作ったとする。自分のサイトに配置しても問題なく動く!
テストも終わったし、さぁ配布しよう!
・・・と配布をしてもこのコードは一切動かないのだ。
というのも、JavaScriptの制約として非同期処理で他のドメインに対してアクセスを行ってもデータが取得出来ないと言うものがあるからだ。(通信自体は成功するので、Ajax.Requestを送れば接続までは成功する。ただし、データは手に入らない。)
そうなると他の人のページに自分のサイトの情報は出せないのか?と言うとそんな事は無い。

この時に使えるのがscriptタグだ。
scriptタグを使えば実際にデータを表示する事が出来る。
例えばRubyならこんな感じのコードになる。
【クライアントコード】
<div>
<script type="text javascript" async=""  src="http://hoge.com/write/test.js"></script type="text>
</div>

【サーバーサイドコード】
class WriteController
  def test
    render :text => "document.write('<ul><li>データ</li></ul>')"
  end
end
このように書くだけでクロスドメインは解決出来る。
クライアントコードではscriptタグのコードを好きなところに配置するだけで別ドメインのデータを表示出来るのだ。
(サーバーサイドからアクセス出来る場合はAPIとかを使えば良いのだが、クライアントサイドだけで行う場合はこのような方法しか無い。)

しかし、この方法だと検索フォームを配置してから検索結果を出すようなブログパーツを作る事は出来ない。なぜなら、他のサイトのデータは表示出来るが一度取得後に再取得を行う事が出来ないからである。
こうなるとAjaxのような事が出来ない。

そこで出てくるのがJSONPと言う技術だ。(と言うより、この技術はJavaScriptのセキュリティの甘いところを悪用した技術に過ぎない。)
一般的にJSONと言うと
{"hoge" : "text", "foo" : "text2"}

と言う書式でデータをやり取りするものである。
これがJSONPになると
callback({"hoge" : "text", "foo" : "text2"});
となる。
ただ、これだけの違いが大きな差を生むのだ。
実際にこのコードを呼び出す場合にどうなるかと言うと・・・
【クライアントコード】
<div>
<script>
function callback(json) {
alert(json.data.text');
}
</script>
<script type="text javascript" async=""  src="http://hoge.com/write/test.js"></script type="text>
</div>

【サーバーサイドコード】
class WriteController
  def test
    render :text => "callback({"data" : {"text" : "これが表示される"}})"
    # 実際はこう書く方が手っ取り早いし、JSONとJSONPに対応出来る。(jsonをrequireする必要がある。)
    # render :json => @data.to_json, :callback => params[:callback]
  end
end
こうなるのだ。
このようにする事でScriptタグを読んだ結果のJSONデータを受け取る事が出来るのだ。
(※注意点としてはScriptタグの前にコールバックメソッドを記載しておく必要がある。)

しかし、これだけではまだ検索フォームにデータを入力しても検索結果を出す事が出来ない。
ならばどうすれば良いかと言うと、、、検索を行うたびにJavaScriptでScirptタグを生成すれば良いのだ。

・・・ということで、ここから先は他のサイトの方が丁重かつ親切なので僕の役目はここまでとする。
注意点はSctiptタグやコールバックメソッドがどんどん作成されてしまうので、この手の処理を行う時にはしっかり後始末を行う事です。
あとは、文字コードとかに注意!

ではでは。
AD
いいね!した人  |  コメント(0)  |  リブログ(0)

傲慢SEさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。