はじめに
「このサイトの人気ページを見たい!」
「このページに、皆いったいどうやって来てるんだろう?」
「このページを見たあとは、どこを見に行ってるんだろう?」
そんなこと思ったことありませんか?
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**
Step 3 外部ドメインから呼び出せるように callback を指定する
生の JSON では、外部ドメインから呼び出せないので、 callback 関数を指定しましょう。
以下のように
http://api.pathtraq.com/pages?callback=alert&api=json&url=**ここに調べたい URL**
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/