JavaScript から WebAPI を利用してみた

そろそろ WebAPIサービスを使ってみようと思っていたので、JavaScript からAPIを利用する方法について調べてみました。

APIとは

API(Application Program Interface)とは、関数や命令の集合体であるライブラリに対し、アプリケーションから要求(リクエスト)するための手続き方法のこと。

なので、WebAPI は Web 上に公開されているライブラリに対して要求する手続き方法のことです。

JavaScript から WebAPI を利用するまでの流れ

利用しているサーバーが無料ホームページであることもあり、PHP等のサーバーサイドスクリプトが利用できないので、JavaScript からの WebAPI を利用方法を記述しておきます。

  1. 登録が必要なAPIサービスの場合は登録して、アカウントを作成。
  2. HTML上の script要素の src属性にて、クエリ文字(?)でパラメータを乗せて WebAPI にリクエストできるようにしておく。

    パラメータ名や値は、利用する WebAPI のリファレンスで確認してください。
    また、書き方は下記のようにパラメータと値を(=)でつなぎ、それらを(&)でつないで記述します。

    Amazon の場合
    • src="http://ecs.amazonaws.jp/onca/xml?パラメータ名=値&パラメータ名=値"
    なお、認証や一定の形式が必要な場合は、APIのリファレンスで確認し、それに従うように作成してください。
  3. リクエストに成功した場合は、レスポンスが返ってくることになるので、このレスポンスを処理する関数を作成しておく。この関数は、パラメータにコールバック関数の値として記述することになります。

    レスポンスは jsonp 形式なら問題ないのですが、たいていXMLで返ってくるので JavaScript でXMLのまま処理できない(したくない)場合は、json形式に変換するための xsl文書(xslt)も作成しておく必要があります。(xsl が利用可能な場合ですが。)

流れとしてはだいたいこんな感じで、レスポンスとして返ってきた内容を指定したコールバック関数で処理して表示することになります。

なお、script 要素で他のドメインからデータを取得する仕組みは JSONP と呼ばれるものですが、これは別ドメインからデータを取得・設定できないという同一生成元ポリシーによるクロスドメイン問題を解決するためのものです。

前に iframe で表示させている Amazon インスタントストアのスタイルを、JavaScript から変更させてみようとしたのですが、できませんでした。
今考えてみると、このクロスドメイン問題が原因だったようです。

後書き

手始めに Amazon Product Advertising APIを、下記の参考にさせて頂いたサイトを見ながら JavaScript で簡単な商品検索フォームを作成してみました。

参考にさせて頂いたサイト
Amazon Web サービス入門(Product Advertising API) / Ajaxの学習ならAjaxTower

ところが Amazon のAPIを利用する場合、シークレットアクセスキーを隠す必要があるので、JavaScript 内で確認できる状態のままでは公開できないことに後から気づき、どのように隠すか考えてみたのですがまったく思いつきません。

結局どうにもならないようなので、ひとまず作成したスクリプトの関数や値を楽天ウェブサービスのAPI用に変更して、楽天版の商品検索フォームとして公開することにしました。

作成したサンプル : 楽天商品検索フォーム(画像表示版)

スポンサードリンク

inserted by FC2 system