YQL を使ってサーバーを用意せずに URL から title を取得する方法

9 years ago

先日, 『JSONP で URL から title を取得できる API サービス | phiary』で JSONP を使って url からタイトルを取得する方法を紹介しました.

Yahoo! さんのサービス『Yahoo Query Language（YQL）』を使えばもっと汎用的にやれること知ったので紹介します.

Runstant Demo

デモです. get title ボタンを押すと input field にある url からタイトルを引っ張ってきて表示してくれます.

適当に　URL を書き換えてタイトルを取得してみてください.

Detail

メインとなる処理はこちらです.

var getTitle = function(url, callback) {  
  var END_POINT = 'http://query.yahooapis.com/v1/public/yql';

  $.ajax({
    type: 'GET',
    url: END_POINT,
    dataType: 'jsonp',
    data: {
      q: 'select * from html where url="{0}" and xpath = "//title"'.format(url),
      format: 'json'
    },
    success: callback,
  });
};

YQL を使って url からタイトルタグの情報を取得しています.
帰ってきた値は下記のように参照することができます.

  getTitle(url, function(data) {
    var li = $('<li>').appendTo(linksElement);
    var a = $('<a>').appendTo(li);

    a.attr('href', url);

    a.html(data.query.results.title);
  });

Tips

String.prototype.format 関数

JavaScript には文字列を format する関数がないので
自作しています.

今回の趣旨と若干ずれるので触れていませんが, これがあると今回の q のような値を指定する際にとても楽になります.

実装について詳しく知りたい方はこちらを参照ください.

Description を取ってくる

q の xpath に渡す値を変更することで様々な値を取得することができます. 下記のように指定すれば description を取ることもできます.

q: 'select * from html where url="{0}" and xpath = "//title | //meta[@name=\'description\']"'.format(url),

runstant

phi