ステップ・バイ・ステップで Pathtraq の API を使ってみよう

はじめに

「このサイトの人気ページを見たい！」
「このページに、皆いったいどうやって来てるんだろう？」
「このページを見たあとは、どこを見に行ってるんだろう？」
そんなこと思ったことありませんか？
Pathtraq API を使うことで、そんな情報をあなたのソフトウェア、ウェブアプリケーションに組込めるようになりました！やった！

でも、難しいんでしょ＞＜？

違うよ。全然違うよ。超簡単だよ。
というわけで、今日は JavaScript から Pathtraq API を使ってみましょう！

Step 1 Pathtraq API を目で見てみよう！

やり方は、簡単です。

http://api.pathtraq.com/pages?url=**ここに調べたい URL**

とやるだけです。
試しに、このブログを見てみましょう。

RSS が出力されました。
これは、 IT 戦記内で最近人気のページを RSS で出力しているのです。（もちろん、これをそのまま RSS Reader に登録して使うこともできます。）

Step 2 出力の種類を JSON にしてみる

RSS では JavaScript から扱いにくいので、 JSON で出力するようにしてみます。
やり方は、簡単です。

http://api.pathtraq.com/pages?api=json&url=**ここに調べたい URL**

と api=json を追加してやるだけです。

これで、出力が JSON になりました

Step 3 外部ドメインから呼び出せるように callback を指定する

生の JSON では、外部ドメインから呼び出せないので、 callback 関数を指定しましょう。
以下のように

http://api.pathtraq.com/pages?callback=alert&api=json&url=**ここに調べたい URL**

callback=alert を追加してみました。

Step 4 ブックマークレットを作ってみる

ここまでで、ウェブサイト内の最近人気のページを JSON で取得する方法が分かりました。
では、これでブックマークレットを作ってみましょう。
以下のブックマークレットを適当に開いたページで実行してみてください。

javascript:var ptCallback = function(info) {var items = info.items;var result = [];for (var i = 0; i < items.length; i ++) {result.push(items[i].link);}alert(result.join('\n'));};var elmScript = document.createElement('script');elmScript.src = 'http://api.pathtraq.com/pages?callback=ptCallback&api=json&url=' + encodeURIComponent(location);document.body.appendChild(elmScript);void(0);

こんな感じで最近人気ページ一覧が出てきましたね！

では、コードを見てみましょう。

// API が呼び出す関数を作る
var ptCallback = function(info) {

  // 最近の人気ページ情報が配列として .items に入っている。
  var items = info.items;

  var result = [];

  // items の操作
  for (var i = 0; i < items.length; i ++) {
    result.push(items[i].link);
  }

  // 表示
  alert(result.join('\n'));
};

// script 要素（タグ）を作る
var elmScript = document.createElement('script');

// script 要素で Pathtraq API を読み込む
//   - location.href は今見ているページの URL を示している。
//   - callback= で、さっき作った ptCallback を指定してあげる。
elmScript.src = 'http://api.pathtraq.com/pages?callback=ptCallback&api=json&url=' + encodeURIComponent(location.href);

// body 要素に script 要素を挿入する
document.body.appendChild(elmScript);

ね、簡単でしょ？

Step 5 最近の人気ページ以外の情報も見たい

こんな簡単だともっといろいろな情報を見たくなりますよね！
ちょっと改造するだけで、もっといろいろな情報を見ることができます。
例えば、

最近このウェブサイトの前に見られているページ一覧

調べたい URL の先頭に nextpage: を追加します

http://api.pathtraq.com/pages?callback=alert&api=json&url=nextsite:**ここに調べたい URL**

これもブックマークレットにしてみました！

javascript:var ptCallback = function(info) {var items = info.items;var result = [];for (var i = 0; i < items.length; i ++) {result.push(items[i].link);}alert(result.join('\n'));};var elmScript = document.createElement('script');elmScript.src = 'http://api.pathtraq.com/pages?callback=ptCallback&api=json&url=' + encodeURIComponent('nextsite:' + location);document.body.appendChild(elmScript);void(0);

わー、自分のブログがどのページから見られてるのか一目瞭然ですね！

最近このウェブサイトの後に見られたページ一覧

調べたい URL の先頭に prevsite: を追加します

http://api.pathtraq.com/pages?callback=alert&api=json&url=prevsite:**ここに調べたい URL**

「最近の情報」じゃなくて、「通算の情報」を見たい

クエリに m=popular を追加します

http://api.pathtraq.com/pages?m=popular&callback=alert&api=json&url=**ここに調べたい URL**

もっともっと（時間的に）最近の情報を見たい

クエリに m=upcoming を追加します

http://api.pathtraq.com/pages?m=upcoming&callback=alert&api=json&url=**ここに調べたい URL**

Step 6 あとは、コーヒーでも飲んでまったり

アイデアを考えましょう！

まとめ

Pathtraq API は他にもたくさんの種類があります。
今回は Bookmarklet で使ってみたけど、 Greasemonkey との相性がいいんじゃないかなと思います＞＜
Pathtraq API 楽しいです！

ちなみに

公式のドキュメントは、以下にあります。
http://pathtraq.com/developer/

IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚