Yahoo!のユーザーインターフェイスブログ（YUIBlog）

サティヤムを尋ねる：YQLDataSourceでYQLとYUIの使い方

サティヤム（別名ダニエルバレイロは）長い時間YUIの貢献者との最も多作、寛大な専門家の一人ですYUIフォーラム 。 彼はまたであるライブラリを学習：YUI 2.8.0、YUI 2.8.0の新しい本の著者 。 "サティヤムの質問"シリーズのこの記事は、 マイクハットフィールドによって示唆された 。 サティヤムは、シリーズの一部としてYUIBlogでここ数週間でいくつかの追加質問に答えることになります。

YQLを知って取得

Yahoo!のクエリ言語、 YQLは 、標準の使いやすいインタフェースを介して膨大な量の情報にアクセスするのに最適な方法です。 それがいかに簡単であるかの味を持っている、古い比較するアーティストのサービスマニュアルを参照して ：このシンプルなYQLクエリーでselect * from music.artist.search where keyword='Rihanna'.

YQLコンソールは非常に使いやすいです。 それは、それらの上で使用可能なテーブルとサンプルクエリの多くを示していますので、簡単にそれを介してアクセス、豊富な情報を探索することができます。 YQLは、データを格納するのではなく、それは他のデータベースやAPIへのクエリインターフェイスです。 テーブルの数は、Yahoo!のソースからYQLリストが142であることが、をクリックすると表示コミュニティテーブルのリンク、カウントは825に上昇し、アマゾンやFacebook、ネットフリックスやニューヨークタイムズでの公開データへのアクセスが含まれます。 （あなたが少数のYUI関連テーブルなどをご覧くださいこれはあまりにも、だ。）

時には、これらの表は、その所有者から取得する必要があるアクセスキーを必要とする、それなしで次のいずれかのクエリを実行したり、結果の限られた数を取得することができない場合があります。 YQLサービス自体は2つのアドレス、登録を必要とし、優れたパフォーマンスを提供する1つのパブリックインタフェースと別のものを持っていますし、もちろん、あなたはその一部のテーブルからプライベートデータにアクセスするための認証が必要になります。

デフォルトでは、YQLは約10のレコードでサンプル応答を提供します。 次の例のように、テーブル名の後の括弧内に結果の要求数を追加することにより、結果の大きな数を指定することができます。

 キーワード="マドンナ"music.artist.search（22）から*を選択します。 

YQLコンソールでのデータのテーブルリスト内の各テーブル名の横に、必ずテーブル名をマウスでポイントのDescのボタンは、テーブル名の右側に表示されます。 それは、テーブルの説明を提供し、通常のサンプルクエリとフィールドのリストが含まれます。 必要に応じてフィールドがマークされているの気配りである。 これは、特定のテーブルに必要なアクセスキーを見つけることができる場所です。

YUIとYQLを使う

YQLはWeb上の構造化データへの柔軟性、汎用的なインタフェースであり、そしてYUI（とDataSourceを 、 オートコンプリート 、 DataTableにとチャートが ）このデータへのインタフェースを消費し、提供するのが得意です。

しかし、最初に心に留めておくべきいくつかの注意事項があります。

＃1の奇癖：部分クエリとYQLソースデータを

一部のテーブルには、ペアリングについて適合していないオートコンプリート彼らは部分的な検索キーの結果が得られないので。 YQLは、次のようなワイルドカードクエリを許可されていますがkeyword like 'mado%' 、データの実際のプロバイダがこのようなクエリをサポートしていない可能性があります-ユーザがオートコンプリートボックスにマドンナの名前を入力を開始するように、フルワードのマッチのみの結果が表示されます名前が完全に入力されるまで、マドンナは提供されません。 あなたのアプリケーションのあなたに関心のあるYQLテーブルを探索し、この点に注意してください。

奇癖＃2：YQLのソートおよびページ区切り

YQLで並べ替えると、結果セットがフェッチされた後に適用されるフ​​ィルタです。 サーバー側のソートおよびページ区切りを持つDataTableのソースとしてYQLを使用した場合、あなたはトラブルになります：ユーザーが既に特定の列でソートされたテーブルを持っているとページ2のため要求された場合は、YQLは、最初に次を選択しますその後、N個のソートされていないテーブルのレコードと、通常はソートテーブルの次のN個のレコードを期待するときにそれらを並べ替える。 例えば、あなたがその順番で4,3,2,1を含む単一の数値フィールドとテーブルとテーブルを持っていると言う。 あなたは、ページごとに2つの行でDataTableを持っていると、その単一の列でソートしておく。 YQLは、代わりにその後、1,2と3,4と、第二の最初のページと1,2のために3,4を返します。 それが最初にソートされていないデータとその後のソート中に"ページ"選択を行うためです。

奇癖＃3：YQLレスポンス構造

YQLはレスポンスの構造は、返されるアイテムの数に応じて変更する。 我々は結果を指している変数をダンプするとしたら、我々は、項目数に応じて、これらのいずれかが表示されることがあります。

  NULL 

  [] 

  {someChangingPropertyName：{
			 fieldName1：値1、 
			 fieldName2：value2の、 
			 ...
		 }} 

  [
			 {
				 fieldName1：値1、 
				 fieldName2：value2の、 
			 ...
			 }
		 ] 

  {someChangingPropertyName：[
		     {
				 fieldName1：value1row1、 
				 fieldName2：value2row1、
				 ...
			 }、
		     {
				 fieldName1：value1row2、 
				 fieldName2：value2row2、 
				 ...
			 }、
		     ...
		 ]} 

  [
		     {
				 fieldName1：value1row1、 
				 fieldName2：value2row1、 
				 ...
			 }、
		     {
				 fieldName1：value1row2、 
				 fieldName2：value2row2、 
				 ...
			 }、
		     ...
		 ] 

最後の列には、より一貫性のある代替、無気まぐれなプロパティ名と常にクエリが返す可能性がある項目の任意の数と配列が、常に単純な配列を示しています。

YQLと非同期クロスドメインデータ

YQLはまた、いくつかの形式で非常に同じ情報を、提供することができるXML 、 JSONとJSONPを後で私が最ものために興味を持っているものであること、 同一生成元ポリシー 、ブラウザは、許可しないのXMLHttpRequestオブジェクトは、ソースを外にアクセスする独自ドメイン。 YUIの接続マネージャとYUI IO 、元々はXMLHttpRequestに限定され、導入しているフラッシュ付きXDRインタフェースなどのクロスドメイン要求を許可する。

YUI取得ユーティリティ YQLのと相まってJSONPの機能はまたこの問題に対処しています。 この仕組みを見てみましょう。 あなたが追加することができます<script>任意の時点でタグをと<script>タグは、どこから何をロードすることができます。我々は関係なく、私たちのページがどこにあるのYahoo!の中古品YUIライブラリのコンポーネントをロードするとき我々は定期的にこれを行います。 しかし、このアプローチは、サーバーからいくつかの助けを必要とする<script>タグをJavaScriptコードを想定している。 ：我々は次を含むファイルをロードしようとした場合

  123 

値が変数に割り当てられていないので、それは、私たちに何の役にも立たないだろう。 我々はこれをロードしようとした場合：

  VAR結果= 123; 

その後、数が変数に格納されるresult 。 そのような変数はグローバルスコープでのようになります良いアイデアではない 。 それが使用可能になるとさらに悪いことに、値が一度保存されて検索可能なことであろうが、我々は知ることは、我々は、ポーリングする必要があると思いますresult我々はデータを得ていたときに発見するために変数を。 YUI取得ユーティリティは、成功と失敗の両方のトランザクションをシグナリングすることにより、この問題を解決。

より一般的な解決策は、サーバからいくつかの助けに頼って、コールバック関数の値をラップすることです。

  callbackFunction（123）; 

この関数は値を格納したり、プロセスが処理されますと、コンテンツが完全にロードされるまでは呼び出されないでしょうので、それはまた、データの到着を通知することができます。 ほとんどのJSONPサーバは、URLの引数（通常と呼ばれる受け入れcallbackでデータをラップする関数の名前が含まれています）。 のような名前空間つきの関数YAHOO.example.SiteExplorer.callbackコールバック関数のための賢明なオプションです。

重要な問題を考慮する必要があります。JSONPはJSONのように安全というわけではありません。 JSONは、フィールドの値で実行可能なコードの任意の並べ替えを許可しません。 しかし、原理的には、何か良いJSONのエンコーダは、JSONの出力に注入されてからコードを防止する必要があります、YUIのJSONユーティリティはまた、そのどれもが受信されていないかをチェックします。 これは、受信したものは喜んで可能な副作用のあらゆる種類と、実行されるJSONPの場合ではない、一切理由は聞きません。 JSONPでは、基本的にロードするスクリプトを生成するために外部サーバを求めている。 したがって、このように、信頼されたサーバでJSONPを使用するように注意してくださいと、あなたのサーバからJSONPを提供することを計画している場合不正なコードが含まれている可能性がある任意のフィールドがエスケープされるように、コールバックの結果をラップする前に適切なJSONのエンコーダを使用していることを確認し、中和。 我々が学んだのと同じようにSQLインジェクションとどのようにそれを防ぐために、この種のJSONPの株式を覚えている脆弱性 。

YQLサービスはJSONPをサポートしています。コンソールで、余分な入力ボックスには、最初にテキストを含む、JSONのチェックボックスの右側に表示されますcbfunc 。

これは、クエリ文字列内に追加可能なパラメータに変換されます。 ：我々は、JSON、からURLの変更を選択した場合

  http://query.yahooapis.com/v1/public/yql?q=select％20 *％の20from％20
	       geo.places％の20where％の20textの％3D％22san％20franciscoの％2C％の20ca％22 

への

  http://query.yahooapis.com/v1/public/yql?q=select％20 *％の20from％20
	      geo.places％の20where％の20textの％3D％22san％20franciscoの％2C％の20ca％22＆
	     フォーマット= jsonの＆コールバック= cbfunc 

基本的なURLがかかるq URLエンコードされたクエリを含む引数を。 JSONのために我々は、指定することができますformat=jsonして、JSONP我々はの名前を提供することにcallback関数を。 オプションのdiagnostics=true引数は、応答のいくつかの余分な診断情報を取得するために追加される可能性があります。

YUIのデータのソースとしてYQLを使う

ジョナサンルブランはまた便利な書かれているユーティリティ YQLクエリーを行うと、彼はで提示シンプルなテンプレートに基づいて、その結果を書式設定、 YUIのブログの記事を 。 あなただけの結果と、結果のコンテナをフォーマットするYQLクエリ、テンプレートを提供する必要があります、それは私たちのすべてのマニューシャの面倒を。

  yqlWidget.push（
    / /クエリ
    、"場所= 90210 weather.forecastからitem.description選択"を  
    / /コンフィギュレーションオプション
    {}、
   中括弧内のフィールド名を持つプレースホルダ/ /テンプレート
    "<br style="c​​lear:both" /> {item.description}'、
   結果のコンテナの/ / ID
    "widgetContainer"
 ）;
 yqlWidget.render（）; 

フィールドの任意の数のクエリで要求することができる;などでも、ネストされたフィールドitem.description中括弧で囲んで、テンプレートで使用することができます。

YQLDataSource

YUIが利用したりできるデータソースの正式なオブジェクトにYQLデータを変換することによって、クラスが、さらに一歩ジョナサンの仕事を取るYQLDataSource。 YQLクエリーの結果は、通常いくつかの表形式の情報です。 YUIのDataSourceのコンポーネントは、この種の情報を取得するために設計されています。 いくつかの他のYUIコンポーネントの使用は含め、自分のデータをフェッチするデータソースオートコンプリート 、 グラフとデータテーブル 。 しばらく前に私は、DataSourceのサブクラス、開発YQLDataSource拡張YAHOO.util.ScriptNodeDataSourceそれからデータをフェッチするYQL Webサービスに接続することを。 私はそれを使用するこの例ではオートコンプリートボックスとネストされたDataTableの二つのレベルのデータが（入れ子になったデータテーブルは、さらに記事の主題となる）YQLDataSourceによって提供されるここで、。

YQLDataSource簡単ですし、まだ単純な可能性があります。 いずれも開発者によって明示的に指定されていない場合は、コンストラクタでは、YQLのWebサービスのデフォルトURLを設定します。

  =関数（oLiveData、oConfigs）{をYAHOO.util.YQLDataSource
	     oLiveData = oLiveData | |'http://query.yahooapis.com/v1/public/yql?format=json&q =';
	     YAHOO.util.YQLDataSource.superclass.constructor.call（この、oLiveData、oConfigs）; 
	 }; 

URLの一部として我々はすでにJSONとして応答の形式を確立し、追加q YQLクエリーを受信するための引数を。

すべての他のDataSourceのサブクラスと同じように、我々が使用できるほとんどの静的メンバ、定数、上書きコピーします。

  YAHOO.lang.augmentObject（YAHOO.util.YQLDataSource、YAHOO.util.DataSourceBase）; 

ScriptNodeDataSourceを拡張するとき、我々は彼らがいるの最初の、そのメンバーのいくつかをオーバーライドresponseType我々が知っているのでresponseType JSONになりますが。

  YAHOO.lang.extend（YAHOO.util.YQLDataSource、YAHOO.util.ScriptNodeDataSource、{
	     responseType：YAHOO.util.DataSource.TYPE_JSON、 

我々は要求としてYQL文を受け取るので、それはURLの残りの部分に連結できるようにする前にそれをエスケープする必要があります。 我々は、でそれを行うmakeConnection我々はこのようにオーバーライドする方法、。

  makeConnection：関数（oRequest、oCallback、oCaller）{
	      YAHOO.util.YQLDataSource.superclass.makeConnection.call（これ、
	           encodeURIComponent（oRequest）、oCallback、oCaller）;
	 } 

我々は、元のバージョンを呼び出しoRequest YQLクエリー、適切にエスケープが含まれている引数を、。

今我々はいくつかの魔法を追加します。 我々は慎重になって、明示的に取得するためのフィールドを列挙したことを前提としています。 私は見て嫌うSelect *生産コード内のステートメントを、彼らは最終製品に探索するための罰金が無駄です。 このように、私は応答に来てどんなフィールドは我々が本当に望んでのものであることを信じるでしょう。 残念なことに、YQLはフィールドでも、そのデータ型のリストを返しません。また、クエリに応じて、日付などのフィールドは非常に異なる書式で表示されることがあります。 YQLは、これ以上の中間よりもないので、それが返す値は、それらが、日付やブール値などの値の異なるフォーマットを占める、提供されているいずれかの形式で元のソースからのものです。

そう、最終的に、我々は結果になる何を信頼しますが、データの一部が適切な形式でない場合、我々はまだパーサを指定することができるでしょう。 例えば、YUIのDataTable内の数字を含む列をソートするには、数値フィールドは、数字を含む文字列だけではなく、実際のJavaScriptの数値である必要があります。 特定のアルバムのトラックのYQLクエリは、文字列として数値を返しますので、数字にそれらを解析する必要があります。 我々が言うことができる。

  VAR tracksDS =新しいYQLDS（"、{
	     responseSchema：{
	        フィールド：[
	             {キー："Track.discNumber"、パーサ：'番号'}、 
	             {キー："Track.trackNumber"、パーサ：'番号'}、
	             {キー："Track.duration"、パーサ：'番号'}、
	             {キー："Track.popularity"、パーサ：'番号'}
	         ]
	     }
	 }）; 

クエリには、含まれてtitle文字列であるとは構文解析を必要としないフィールドを、。 また、我々はそれを取得するためにドット表記法を使用するように、データがさらに下のレベルにネストされていることに注意してください。 我々はフィールドが来ているかを把握するために使用するデータ、、の最初の行は応答の構造の代表ではない場合、その最初の行に欠けているフィールドは、何らかの理由でデータの場合、最終的に、同様に指定することができYQLDataSourceが想定してどこに配置されていない、我々はまた、指定することができますresultsList 。

ここでは細部に入ることはありません。ソースコードは、手順をご案内するコメントが含まれています。 十分と言うことはparseJSONData方法は非常に上書きされる、元のメソッドが呼び出される前に、すべてのフィールドの情報は、開発者が指定されている何で解析され、結合されようとしてデータの最初の行から抽出されます。 この方法では、また追加responseSchema.metaFieldsクエリーで常に利用可能なメタ情報を抽出するために、既に存在するプロパティを、そうでない場合は、（返されるレコード数count結果セットが（作成されたとき、） created ）とデータの言語（ lang ）。

単純な場合には、私が構築この例 YQLDataSourceを使用し、テンプレートに基づいてクエリの結果で指定されたコンテナを埋めることができる。 関数は次のように呼び出すことができます。

  YAHOO.example.YQLSubstitute（
	     "リスト"、
	     、'クエリ="バルセロナ"search.newsからタイトル、アブストラクト、URL、ソースを選択します。"
	     "<LI> <H2> {タイトル} <\ / H2> <P> {抽象} <\ / P> <address>に<a href="{url}"> {ソース} <\ / A> <\ /アドレス> <\ / LI>'
	 ）; 

私は、関数と呼ばYQLSubstituteして下に置かYAHOO.example名前空間。 それは、次の引数を受け取ります。

1. への参照や、結果を（この場合は、への参照が含まれるHTMLのid <ul id='list'>他のページ内の要素）。
2. 実行するYQL文。
3. プレースホルダとしてフィールド名を持つテンプレート

4. オプションの構成オブジェクト。

クエリがYQLDataSourceでサポートされているため、それは、プレースホルダ内のネストされたフィールドを指定するには、ドット表記を使用することが可能です。 オプションの4番目の引数、設定オプションは、任意のパーサが必要な場合、それらはここで設定することができるので、YQLDataSourceにストレートで渡されます。 さらに、 YQLWebService設定オプションでは、YQLのWebサービスのURLをオーバーライドできます。

YQLとYUI 3

YUI 3については、データソースとDataSchemaなどからデータを消費することができる他の多くのコンポーネントがまだないので、当分の間、私はDAVガラス"使用YQLQueryの 3.2.0リリースの一部となるギャラリーのモジュールを。 でYQLSubstituteの YUI 3の例で私はいくつかの例外を除いて、YUIの2例と同じインタフェースを提供することを試みた。 YUI 3の商慣習として、最初の引数は、CSS3のセレクタです。nestedフィールドとパーサを利用できず、余分な設定オプション、単に最初の3つの必須引数はありません。 両方の例がよくコメントアウトされて、ちょうどクエリの出力の後にコメントを達するために下にスクロール。

結論

この記事では、持っている。

• YQLとは何かを見て、私たちはYQLクエリーをまとめると、いくつかの形式で提供される結果の出力を見ることができますYQLコンソールを探検
• JSONPとは何かを説明し、どのようにYUI取得ユーティリティでそれを使用する
• YQLテーブルを照会するには、Getして結果を提示する使用例をいくつかにリンク
• オートコンプリートとDataTableとの例を含めて、それがどのように動作するかYQLDataSourceと見
• YQLDataSourceを使用して定義YQLSubstitute機能
• YQLQueryギャラリーコンポーネントを使用してYUI3に対して同じ機能を定義

記事に沿って設けられた多数のリンクを探索するか、の例では、YQLのWebサービスに直進実際のクエリです。 説明とコメントコードを読むための出力例を越えてスクロールダウンすることを忘れないでください。

会話して下さい： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | のreddit！