カテゴリー: 未分類

クロスドメイン制限の回避策その2
クロスドメイン制限の回避策として作られた手法
それがJSONP
JSONPは
JSON with Paddingの略称
これを使えば、ドメインの異なるサーバからデータの取得ができる
これは、scriptタグのライブラリ取り込み機能を使う
scriptタグのsrc属性へ設定するURLは
異なるドメインでも利用できる
この性質を利用し
WebAPIで利用するデータをJavascriptライブラリとして
うけ渡すことができる
このため、多くのWebAPIがJSONP形式でデータを提供している
scriptタグで取り込むのは
Javascriptのソースであるため
JSONPの呼び出し結果は
Javascriptのソースコードになっている

クロスドメイン制限の回避策その1
いくら、同じオリジンへ置こうとしても
さすがにWebAPIをあつかうときに、この制限てはできないため
回避策その1として
自分のサーバーへ仕掛けを作成します
Ajaxアプリは、自分のサーバーのみ通信
そして、自分のサーバーには
CGI
たとえば
PHP
Ruby
Java
などを仕込んでおき、
定期的に行うか、もしくはAjaxアプリを使い
別のドメインのWebAPIの結果を取得
受け取った結果を、自分のサーバーのAjaxアプリへ返す
つまり、自分の、サーバーへCGIを設置し
このCGIから別ドメインのWebAPIの結果を取り込むという方法
Webサーバー側のCGIなら
別サーバとの通信制限
つまりクロスドメイン制限が適用されない

クロスドメイン制限について
WebAPIを使うときに制限となるのが
クロスドメイン制限
これは、Javascriptのセキュリティー制限により
そのHTMLが置かれているドメインの、サーバーとしか
通信できないという制限のこと
Ajax通信できるのは
HTMLファイルが置かれているのと同じドメインのサイトのみ
厳密にいえば、オリジンが同じならok
オリジンは
プロトコル+ドメイン+サブドメイン+ポート番号
のこと
この制限がクロスドメイン制限
別名
Same-Originポリシー
とか
Same-Originルール
とか
クロスドメインセキュリティー
とか呼ばれる
このため、ゲームなどてデータを扱うときには
同一オリジンに置く必要があります
一応回避方法はあるので、また今後記載予定てす

HTTPSてjqueryを使うときの警告について
セキュアなHTTPSのサイトで
jqueryなど、非セキュアなHTTP経由の外部ライブラリを
外部サイトから読み込むと、この警告が発生します
実害はないけど、サイト利用に不信感がでてしまうため
対策をします
すべてのCDNライブラリを含め、すべてHTTPS経由にするか
jqueryを同じフォルダーへダウンロードしてリンクする
というようにします
ちなみに、Google MicrosoftのCDNは
HTTPS経由にできます

アプリ開発のメモ

距離や金額ごとにわけてあると見やすい

jqueryのメソッドチェーン
jqueryでほ、様々名メソッドをつなげて実行できます
千代舞う度Linuxのコマンドを
パイプてつなげて実行するような感じです
例えば
$(“#msg”).html(“test”).hide().delay(1000).show(slow);
この場合
$(“#msg”)
て、ID=msgのDOM要素を取得
.html(“test”)
て、testという文字列を設定
.hide()
て、しこまでてきたら非表示にして
delay(1000)
て、1000ミリ秒待機したら
show(slow)
で、ゆっくり表示する
という流れになります

jqueryの便利なエフェクト
show()
hide()
は引数の設定がてきる
引数を、つけないと
アニメーション効果はなしで即座に表示になります
書式は
$(“CSSセレクタ”).show(duration, easing, callback);
$(“CSSセレクタ”).hide(duration, easing, callback);
引数の意味は
duration
アニメーションの速度の指定
slow
fast
ミリ秒単位の中から指定
easing
アニメーションの加速！減速の指定
linear
もしくはswingを指定
callback
アニメーションが終了したときに行う処理の指定となります
show() hide()以外にも様々なエフェクトがあり
引数は同じ用なものが指定できます
toggle()
隠れていれば表示、表示されていたら隠す
fadein()
フェードイン
透明なオブジェクトを段々と濃くしていきます
fadeOut()
フェードアウト
濃いオブジェクトを徐々に薄くしていきます
fadeToggle()
消えているオブジェクトはフェードインして表示
表示されているオブジェクトは消す
slideDown()
上から下へスライドして表示
slideUp()
下から上へスライドして隠す
slideToggle()
表示されているオブジェクトはスライドして隠し
隠れているなら表示する

jQueryで
innerHTMLみたいにHTMLを書き換えしたいなら
$(“CSSセレクタ”).html(書き換えたい内容)
となります
ただし、
$()の戻り値で得られるのは
純粋なDOMではなく
DOM要素をラップしたjQueryのオブジェクトになります
ほかのDOM要素を操作するメソッドとしては
attr(name)
属性値nameの値を返す
attr(name, value)
属性値nameへ
新しい値となるvalueを設定
css(style)
CSSのスタイルstyleの値を返す
css(style, value)
CSSのスタイルstyleへ
値となるvalueを設定
html()
要素の子要素に設定されている
HTMLのコードの値を返す
html(str)
要素の子要素へHTMLの文字列strを設定
val()
inputタグのvalueの値を返す
val(str)inputタグの値にstrを設定
ボタンの名前の表示を変えるとかに使います
ログインからログアウトとか

Amazon AdvertisingAPI
Amazonの商品検索API
利用するには
アクセスキーID
シークレットアクセスキー
アフィリエイトタグ
が必要
ベースURLは
http://ecs.amazonaws.jp/onca/xml
リクエストパラメータの必須パラメータも多い　
以下は必須パラメータ
Service
AWSECommerceServiceを指定
AWSAccessKeyId
アクセスキーID
AssociateTag
アソシエイトタグ
Timestamp
認証のための現在時刻
Signature
認証のための署名を指定
Operation
実行するAPIの処理を指定
商品検索なら ItemLookup
SearchIndex
商品カテゴリーの指定
AllもしくはBlendedなら、全カテゴリ
Apparel
ファッション
Appliance
大型家電
Automotive
カー用品
Baby
ベビー&マタニティ
Beauty
コスメ
Books
本
DVD
DVD
Electronics
家電、カメラ、AV機器
ForeignBooks
洋書
Grocery
食品、飲料
HealthPersonalCare
ヘルス、ビューティー
Hobbies
ホビー
Jewelry
ジュエリー
Kitchen
ホーム、キッチン
Marketplace
マーケットプレイス
MP3Downloads
MP3ダウンロード
Music
音楽
MusicalInstruments
楽器
OfficeProducts
オフィス用品、文房具
Shoes
靴
Software
PCソフト
SportingGoods
スポーツ用品
Toys
おもちゃ
VideoGames
TVゲーム
Watches
時計
以下は必須ではないパラメータ
keywords
検索ワード
ただし、URLエンコードが必要
Title
検索する商品名
Availability
在庫かあるもののみ出すならAvailableを指定
MaxmumPrice
商品の最高価格
MinimumPrice
最低価格
Condition
商品の状態
All
すべて
New
新品
ちなみに！デフォルト設定ほこれ
Used
中古
Collective
コレクター商品
Refyrbished
修理品
MerchantId
出品者ID
Amazon
Amazonのみ
デフォルト設定はこれ
All
すべての出品者
ID
出品者固有のID
ResponseGroup
取得する情報や種類の絞り込み
情報量を指定する
Large
Medium
Small
特定の属性の指定になる
Topsellers
NewRelease
などがある
ItemPage
何ページ目の検索結果を取得するか指定
SearchIndex=All
なら、最大5件となり
5ページ目まで検索できる
　
Version
使用するAPIバージョンを日付で指定
続いてレスポンスフィールド
Items->Result->IsValid
検索結果があればTRUEを返す
Items->Item->DetailPageURL
商品ページのURL
Items->Item->LargeImage->URL
大きな商品画像のURL
Items->Item->ItemAttributes->Title
商品名
Items->Item->ItemAttributes->Label
レーベル
Items->Item->ItemAttributes->ListPrice->FormattedPrice
価格
Items->Item->OfferSummary->LowestNewPrice->FormattedPrice
新品の最安値
Items->Item->OfferSummary->LowestUsedPrice->FormattedPrice
中古最安値
Items->Item->EditorialReviews->EditorialReview->Content
商品の説明
Items->MoreResearchResultsUrl
その他の検索結果のURL

メンテを考えて、ファイルを分割
WebAPIをwordpressで使うとき
テンプレートファイルを改造するけど
このとき、テンプレートファイルそのものへ
ソースを書くより
各テーマのフォルダへ
WebAPIを扱う PHPファイルをアップしておいて
get_template_part()
で呼び出すようにしたほうが
後々メンテしやすくなります
ちなみに、引数には
PHPファイルを拡張子なして指定します
もし、test.phpなら
get_template_part(‘test’);
去年も、いくつかWebAPIが変更になり
コードの修正が必要になりました
このとき、すべてのAPIを一つのファイルにして
さらに、テンプレートファイルに書いてしまうと
変更するときに
探すのも面倒になります
しかし、各ファイルに分割してあれば
必要な部分の修正が用意になります
パソコンの部品も一体型でないなら
メモリやHDD、グラフィックボードなど
壊れた部品の交換だけですみますので
わかりやすいように、分割したほうが
メンテしやすくなります