-
(tags: Ajax)
-
(tags: del.icio.us XML-RPC)
-
(tags: Ajax prototype.js)
-
(tags: Ajax)
-
(tags: Ajax)
-
(tags: Ajax prototype.js)
gooブログのスポンサー誘導枠が開始されたので、さっそくgooブログの編集画面からMicroAdの会員登録をしてみました。
その会員登録の手続きでMicroAdから届いたメールを転載しておきます。スポンサー誘導枠を使うかどうか検討している方の参考になればと思います。なお、転載したメール本文のURLやメールアドレスを省略した部分があります。メール本文の内容は損なわないようにしましたのでご理解ください。
↓MicroAdの会員登録を申請すると、次のメールが届きました。
件名: 【MicroAd】メールアドレスの確認
このメールはMicroAdシステムから自動送信されていますので、
返信はできません。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【MicroAd】メールアドレスの確認と本申請手続き
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
gooブログ サイト運営者様
MicroAd配信サイトの仮申請をいただきまして、ありがとうございます。
下記のURLをクリックしてMicroAd配信サイト本申請を行ってください。
クリックして本申請を行わないと、正式なサイト審査に進むことが
できません。
こちらをもってメールアドレスの確認と本申請手続き完了と
させていただきます。
https://associate.microad.jp/associate/...
※URLをクリックしても、画面が正しく表示されないときは、
このURLをコピーしブラウザのアドレス入力欄に貼り付けてください。
申請開始日直後は大変混雑が予想されます。
厳正なサイト申請を行います。通常５営業日ほどいただき複数回の
サイト確認を実施致します。
何卒ご了承ください。
※サイト登録までの流れ
１．gooブログの編集画面より、MicroAd本サイト：https://associate.microad.jp/associate/login?ID=1
にアクセスして会員情報を入力し、サイト登録の仮申請を行います。
↓↓↓
２．登録したメールアドレス宛に、本申請手続き用URLをお送りします。
（※本メールです。）URLをクリックしてサイト本申請に進みます。
↓↓↓
３．MicroAdにてサイト内容の厳正な審査を行います。
審査には通常５営業日以上をいただき、複数回のサイト審査が行われます。
↓↓↓
４．審査結果のお知らせメールをお送りします。
↓↓↓
５．審査に合格すれば、本登録が完了しログイン可能となります。
広告キーをgooブログの編集画面に入力し、早速gooブログスポンサー誘導枠
をご利用いただけます。
※このメールに覚えのない方は、恐れ入りますが microad-info(at)cyberagent.co.jp
までご連絡ください。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Microad http://www.microad.jp/
Copyright (C) 1998-2006 CyberAgent, Inc. All Rights Reserved.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
↓1日ほどすると、次のメールが届きました。
件名: 【MicroAd】サイト審査のご連絡
このメールはMicroAdシステムから自動送信されていますので、
返信はできません。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【MicroAd】サイト審査結果のご連絡
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
gooブログ サイト運営者様
MicroAdにサイト本申請をいただきまして、ありがとうございます。
厳正なる審査の結果、MicroAd掲載サイトとして承認・登録が行われ
ましたので、下記ページより、登録時のメールアドレスとパスワードで
ログインしてください。
https://associate.microad.jp/associate/login?ID=1
その後、画面の表示内容にしたがって、初期設定、およびgooブログの編集画面
での広告キー入力をお願いいたします。
今後ともMicroAd広告配信をご継続利用くださることを願っております。
※サイト登録までの流れ
１．gooブログの編集画面より、MicroAd本サイト：https://associate.microad.jp/associate/login?ID=1
にアクセスして会員情報を入力し、サイト登録の仮申請を行います。
↓↓↓
２．登録したメールアドレス宛に、本申請手続き用URLをお送りします。
URLをクリックしてサイト本申請に進みます。
↓↓↓
３．MicroAdにてサイト内容の厳正な審査を行います。
審査には状況により５営業日以上をいただき、複数回のサイト審査が行われる場合があります。
↓↓↓
４．審査結果のお知らせメールをお送りします。（※本メールです。）
↓↓↓
５．審査に合格すれば、本登録が完了しMicroAdにログイン可能となります。
広告キーをgooブログの編集画面に入力し、早速gooブログスポンサー誘導枠
をご利用いただけます。
※お問い合わせは microad-info(at)cyberagent.co.jp までご連絡ください。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Microad http://www.microad.jp/
Copyright (C) 1998-2006 CyberAgent, Inc. All Rights Reserved.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
「AOLVS Ajax APIを使ってビデオの主要なデータを表示してみる」までに作ったAjaxアプリは、AOLVS.getVideosメソッドの検索結果の項目からHTMLを組み立てて表示しています。その検索結果には、ビデオのURLやタイトル、概要文といった様々な項目が含まれていました。ただ実際のところ、様々な項目があったとしても、検索結果として表示するスタイルや項目は限られるのでは?という気もします。
AOLVS.getVideosメソッドには、あらかじめ決まったスタイルと項目で検索結果をビジュアルに表示する機能も備わっています。3通りの方法がありますので、今話題の「PS3」をキーワードにそれぞれ試してみました。
AOLVS.VideoSet.embedTag
検索結果の「AOLVS.VideoSet.embedTag」を使うと、その検索結果をFlash Playerを使ってバー表示できます。↓こんな感じです。
「AOLVS.VideoSet.embedTag」はFlash Playerを埋め込むHTMLタグを表します。Flash Playerの中からビデオを検索して表示していると思われます。残念ながら日本語のクエリは機能しませんでした。AOLVS Ajax API自体は日本語のクエリを扱えるので、Flashアプリケーションに原因があるのかもしれません。
function update() {
document.getElementById('results').innerHTML =
AOLVS.VideoSet.embedTag;
}
AOLVS.VideoSet.Video[n].videoResultembedTag
検索結果の「AOLVS.VideoSet.Video[n].videoResultembedTag」を使うと、それぞれの検索結果をFlash Playerを使って表示できます。↓こんな感じです。
「AOLVS.VideoSet.Video[n].videoResultembedTag」はFlash Playerを埋め込むHTMLタグを表します。Flash Playerの中からビデオの主要データを取得して表示していると思われます。
function update() {
var html = '<ol>';
for (var i=0; i<AOLVS.VideoSet.totalResultsReturned; i++) {
var video = AOLVS.VideoSet.Video[i];
html += '<li>';
html += video.videoResultembedTag;
html += '</li>';
}
html += '</ol>';
document.getElementById('results').innerHTML = html;
}
AOLVS.VideoSet.Video[n].videoPlayerembedTag
検索結果の「AOLVS.VideoSet.Video[n].videoPlayerembedTag」を使うと、それぞれの検索結果のビデオをFlash Playerを使ってその場で再生できます。↓こんな感じです。
View example
「AOLVS.VideoSet.Video[n].videoPlayertembedTag」はFlash Playerを埋め込むHTMLタグを表します。ただ、ビデオ(ビデオの配信元?)によってはHTMLタグがなくundefinedとなるケースがありました。
function update() {
var html = '<ol>';
for (var i=0; i<AOLVS.VideoSet.totalResultsReturned; i++) {
var video = AOLVS.VideoSet.Video[i];
html += '<li>';
html += video.videoPlayerembedTag;
html += '</li>';
}
html += '</ol>';
document.getElementById('results').innerHTML = html;
}
しかし、この3通りの方法はどう使えばいいのだろう。。。
「Lyase.View Ajax指向のシンプルテンプレートエンジン(その2)」の続きです。
前回は「using innerHTML(ページ中の要素として)」の方法を使いましたが、今回は「using a template file(外部ファイルとして)」の方法を使って、テンプレートをファイルに分離してみます。↓その結果がこちらです。こんな感じです。
はじめにWEBページ中の要素として追加したテンプレートをファイルに移動します。ファイルに移動したら、次のテンプレート(textarea要素)は不要なのでWEBページ中から削除します。
<textarea id="template" style="display:none;"> template text </text>
テンプレートをファイルに保存してアップロードします。ここでは「lyase_view_ajax.txt」という名前のテキストファイルにしました。
- lyase_view_ajax.txt
<ol> <% context.each(function(video) { video = Object.extend({ description: '(description)', category: '(category)', filesize: '(filesize)', runtime: '(runtime)' }, video); %> <li> <div> <img src="<%=video.thumbnailUrl%>" /> </div><div> <a href="<%=video.videoUrl%>" target="_blank"><%=video.title%></a> </div><div> <a href="<%=video.channelUrl%>" target="_blank"><%=video.channel%></a> - <%=video.dateFound%> </div><div> <%=video.description%> ... </div><div> <%=video.category%> - <%=video.filesize%> - <%=video.runtime%> - <%=video.formats%> </div> </li> <% }); %> </ol>
次にLyase.View.renderメソッドを使ってテンプレートにパラメータを適用します。このとき引数としてテンプレートのファイル名を指定します。
document.getElementById('results').innerHTML =
Lyase.View.render({file: 'lyase_view_ajax.txt'}, AOLVS.VideoSet.Video);
Lyase.View.renderメソッドはprototype.jsのAjax.Requestを使ってテンプレートファイルを取得します。ただし、オリジナルのソースコードではHTTPのPOSTメソッドを使ってテンプレートファイルを取得するため、WEBサーバの設定によってはエラーになることがあります。多くのWEBサーバでは静的ファイルへのPOSTメソッドを制限しているためです。
ですので、エラーが発生するときは、次のようにオリジナルのソースコードを修正して使います。Ajax.RequestのオプションにGETメソッドを使うように指定します。(ソースコードを修正せずにWEBサーバの設定を見直すという方法もありますが、ここでは割愛します。)
- lyase_view.js
//template = (new Ajax.Request(options.file,{asynchronous : false})).transport.responseText; template = (new Ajax.Request(options.file,{asynchronous : false, method: 'get'})).transport.responseText;
参考として「using text(JavaScriptの文字列として)」の方法にも触れておきます。この方法はJavaScriptコード上の文字列をテンプレートとする最も単純な方法です。例えばusing innerHTMLの例は、次のように書き換えることもできます。
var request = new Ajax.Request('lyase_view_ajax.txt', {
method: 'get', asynchronous : false
}).transport;
if (request.status!=200)
return alert(request.status+' '+request.statusText);
var text = request.responseText;
document.getElementById('results').innerHTML =
Lyase.View.render({text: text}, AOLVS.VideoSet.Video);
↓その結果がこちらです。こんな感じです。
Lyase.Viewの使い方はここまで。ただまだ続けます。後はLyase.Viewをより深く理解するため、Lyase.Viewのソースコードを引用しながらその特徴を紹介します。きっと。。。
なんと！近所の「ショップ99」の店頭で大量の「薬用リステリン クリーンミント」が売っているではないですか。
小さめの250mLボトルとはいえ99円(税別)というのはお買い得です。この機会を逃してなるものかと、その場でダンボール1箱(12ボトル)を買ってしまいました。↓こんな感じです。
リステリンは1000mLで700～900円くらいが相場ですから、3000mLを通常の50～75%くらいの値段で買えたことになります。ただちょっと置き場所に困りましたが。
リステリンはケチケチな大人買いでしたが、真の大人買いとは… ブログ界の大人買いチャンピオン!?
「Googleマップの吹き出しにBLOGRANGERパーツを表示する」の中で東京近郊レジャースポット案内というAjaxアプリを作りましたが、さらに吹き出し(情報ウィンドウともいう)をタブ形式にし、レジャースポットの感想に加えてトピックを表示するように改良してみました。↓こんな感じです。
レジャースポットの定義を拡張し、1つのレジャースポットに対して複数のBLOGRANGERパーツのブックマークURLを指定できるようにしました。次のソースコードでは「六本木ヒルズ」「表参道ヒルズ」に2つ、「東京ディズニーランド」に1つのブックマークURLを指定しています。
var spots = [
// {lat: 緯度, lng: 経度, url: ブックマークURL}
{lat: 35.660347, lng: 139.729121, url: [
'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1510',
'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1789'
]}, // 六本木ヒルズ
{lat: 35.665246, lng: 139.712319, url: [
'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1556',
'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1790'
]}, // 表参道ヒルズ
{lat: 35.634017, lng: 139.878595, url: 'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1557'}, // 東京ディズニーランド
・・・途中、省略・・・
];
吹き出しをタブ形式で表示するように改良しました。はじめにレジャースポットに対するブックマークURLが1つ（つまり配列でなく文字列)のとき、あとの処理に備えて配列に変換しておきます。次にその配列を繰り返しながら「GInfoWindowTab」を使ってタブを作っていきます。そして最後に「GMarker.openInfoWindowTabsHtml」を使ってタブ形式の吹き出しを表示します。
function createMarker(spot) {
var marker = new GMarker(new GLatLng(spot.lat, spot.lng));
GEvent.addListener(marker, 'click', function() {
if (spot.url.constructor != Array)
spot.url = [spot.url];
var tabs = [];
for (var i=0; i<spot.url.length; i++) {
tabs.push(new GInfoWindowTab(i+1, '<iframe '
+ 'src="'+spot.url[i]+'" '
+ 'width="320" height="200" frameborder="0" '
+ 'marginwidth="2" marginheight="2" '
+ '></iframe>'
));
}
marker.openInfoWindowTabsHtml(tabs);
});
return marker;
}
ただ、「GInfoWindowTab」のタブが1つ(つまり配列のサイズが1)のとき、「GMarker.openInfoWindowTabsHtml」を使ってもタブ形式で表示されませんでした。このときは「GMarker.openInfoWindowHtml」を使ったときと同じ通常の吹き出しが表示されます。タブが1つかタブが2つ以上かといった条件判断は不要ということですね。
「Lyase.View Ajax指向のシンプルテンプレートエンジン(その1)」の続きです。
Lyase.Viewを使って、さらに次のソースコードのテンプレート化を推し進めます。
var html = '<ol>';
for (var i=0; i<AOLVS.VideoSet.totalResultsReturned; i++) {
var video = Object.extend({
description: '(description)',
category: '(category)',
filesize: '(filesize)',
runtime: '(runtime)'
}, AOLVS.VideoSet.Video[i]);
html += '<li>';
html += Lyase.View.render({element: 'template'}, video);
html += '</li>';
}
html += '</ol>';
document.getElementById('results').innerHTML = html;
↓その結果がこちらです。こんな感じ。
「ol」「li」のリストタグと、そのリストを作る「for」のループをテンプレートに加えます。また今回はprototype.jsを使ってforを「each」に置き換えています。
<textarea id="template" style="display:none;">
<ol>
<%
context.each(function(video) {
video = Object.extend({
description: '(description)',
category: '(category)',
filesize: '(filesize)',
runtime: '(runtime)'
}, video);
%>
<li>
<img src="<%=video.thumbnailUrl%>" />
</div><div>
<a href="<%=video.videoUrl%>" target="_blank"><%=video.title%></a>
</div><div>
<a href="<%=video.channelUrl%>" target="_blank"><%=video.channel%></a> - <%=video.dateFound%>
</div><div>
<%=video.description%> ...
</div><div>
<%=video.category%> - <%=video.filesize%> - <%=video.runtime%> - <%=video.formats%>
</div>
</li>
<%
});
%>
</ol>
</textarea>
Lyase.View.renderメソッドを使ってテンプレートにパラメータを適用します。このときパラメータとしてビデオの配列を指定しています。
document.getElementById('results').innerHTML =
Lyase.View.render({element: 'template'}, AOLVS.VideoSet.Video);
テンプレート中に「<% javascript code %>」(<%=でないことに注目!)を埋め込むと、その埋め込んだJavaScriptコードをそのまま評価して実行されます。またここでのテンプレート中の「context」という変数は「AOLVS.VideoSet.Video」が対応します。
今回はここまで。Lyase.Viewはまだ続けます。次は「using a template file(外部ファイルとして)」というAjax指向の方法を紹介します。
JavaScriptテンプレートエンジンの比較サイトを探していると「blog@slightlyblue javascriptテンプレートエンジンまとめ」というブログを発見しました。このブログは各テンプレートエンジンのコーディングスタイルを実例で紹介しています。ネットでよく見かけるテンプレートエンジンは網羅していると思います。
ただその中に「Lyase.View」という知らないテンプレートエンジンがあったのでさっそく使ってみました。Lyase.Viewは「inforno ? 埋め込みjavascriptを実装してみました。」というブログで配布されています。ライセンスは「Articstic License 2.0」です。ダウンロードするとアーカイブにいくつかのサンプルが入っているので、まずはサンプルを眺めて雰囲気を掴むとよいでしょう。
Lyase.Viewはテンプレートを「using text(JavaScriptの文字列として)」「using innerHTML(ページ中の要素として)」「using a template file(外部ファイルとして)」の3通りの方法で扱えます。今回はusing innerHTMLの方法を使って「AOLVS Ajax APIを使ってビデオの主要なデータを表示してみる」で作ったAjaxアプリをLayse.Viewで置き換えてみました。↓こんな感じです。
次のソースコードをLyase.Viewを使ってテンプレート化します。
html += '<div>';
html += '<img src="'+video.thumbnailUrl+'" />';
html += '</div><div>';
html += '<a href="'+video.videoUrl+'" target="_blank">'+video.title+'</a>';
html += '</div><div>';
html += '<a href="'+video.channelUrl+'" target="_blank">'+video.channel+'</a>';
html += ' - ';
html += video.dateFound;
html += '</div><div>';
html += video.description+' ...';
html += '</div><div>';
html += video.category;
html += ' - ';
html += video.filesize;
html += ' - ';
html += video.runtime;
html += ' - ';
html += video.formats;
html += '</div>';
はじめに「prototype.js」と「lyase_view.js」を取り込みます。lyase_view.jsはprototype.jsに依存しています。
<script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="lyase_view.js"></script>
テンプレートをページ中の要素として追加します。次のように要素はtextareaを使うとよいでしょう。このときテンプレートの要素を特定するためにidを付与しておきます。またテンプレートを表示しないようにstyleで非表示にします。
<textarea id="template" style="display:none;"> <div> <img src="<%=context.thumbnailUrl%>" /> </div><div> <a href="<%=context.videoUrl%>" target="_blank"><%=context.title%></a> </div><div> <a href="<%=context.channelUrl%>" target="_blank"><%=context.channel%></a> - <%=context.dateFound%> </div><div> <%=context.description%> ... </div><div> <%=context.category%> - <%=context.filesize%> - <%=context.runtime%> - <%=context.formats%> </div> </textarea>
Lyase.View.renderメソッドを使ってテンプレートにパラメータを適用します。このとき引数としてテンプレートのidとパラメータを指定します。
html += Lyase.View.render({element: 'template'}, video);
見てのとおり、Lyase.Viewのテンプレートの書式は「PHP」「JSP」「ASP」などページ中にソースコードを埋め込むものによく似ています。
テンプレート中に「<%=javascript expression%>」を埋め込むと、その埋め込んだJavaScriptコードの結果が文字列として置き換わります。またLyase.View.renderメソッドの引数に指定したパラメータは、テンプレート中で「context」という変数で参照できます。
とりあえず今回はここまで。Lyase.Viewの紹介はまだ続けます。きっと。。。
Array.rotateは配列の要素をローテーションするメソッドです。Array.rotateメソッドはprototype.js v1.4.0を前提としています。
配列の先頭から要素を1つ取り出し、その要素を配列の末尾に追加します。このとき、取り出した先頭の要素を返却します。なお、配列が空のときはundefinedを返却します。
Object.extend(Array.prototype, {
rotate: function() {
var v;
if (this.length > 0)
this.push(v = this.shift());
return v;
}
});
Array.rotateの使用例です。
var foo = [30, 20, 50, 30, 10, 10, 40, 50]; alert(foo.rotate()); //=> 30 alert(foo); //=> [20, 50, 30, 10, 10, 40, 50, 30] var bar = ['/tmp', '/home', '/etc', '/tmp']; alert(bar.rotate()); //=> '/tmp' alert(bar); //=> ['/home', '/etc', '/tmp', '/tmp']
配列のインデックスを意識せず、直感的に1ステップでローテーションできますね。「Googleマップ上のレジャースポットを自動クルーズする」のように配列の内容にしたがって繰り返し処理するようなケースできっと役に立ちます。
Number.toDateは数値をDateオブジェクトに変換するメソッドです。Number.toDateメソッドはprototype.js v1.4.0を前提としています。
Numberオブジェクトの値でDateオブジェクトを初期化してそのまま返却します。このときの値は1970年1月1日からの経過秒数（ミリ秒）として扱われます。
Object.extend(Number.prototype, {
toDate: function() {
var v = new Date();
v.setTime(this);
return v;
}
});
数値がミリ秒のときはそのまま変換すればよい。
var mills = 1162738800000; // 2006-11-06 00:00:00 alert(mills.toDate().toLocaleString());
数値がUNIX Timestampのときは1000ms単位にしてから変換すればよい。
var sec = 1162738800; // 2006-11-06 00:00:00 alert((sec*1000).toDate().toLocaleString());
1ステップでDateオブジェクトが生成できるので、使いどころではソースコードがスマートになるかもしれません。
「Googleマップの吹き出しにBLOGRANGERパーツを表示する」の中で東京近郊レジャースポット案内というAjaxアプリを作りましたが、さらにGoogleマップ上のレジャースポットを自動クルーズするように改良してみました。↓こんな感じです。
Googleマップ上のマーカーを20秒間隔で自動巡回しながら、レジャースポットの感想を表示します。自動巡回しますのでクルーズ感覚でしばらく眺めてみてください。何か発見があるかも!?
レジャースポットを定義した配列をローテーションして、吹き出し(情報ウィンドウともいう)を表示するpan関数を用意します。
function pan() {
var spot = spots.shift();
spot.marker.openInfoWindowHtml('<iframe '
+ 'src="'+spot.url+'" '
+ 'width="320" height="200" frameborder="0" '
+ 'marginwidth="2" marginheight="2" '
+ '></iframe>'
);
spots.push(spot);
}
そして、そのpan関数をWEBページのロードが完了したときに呼び出すようにします。また20秒ごとにpan関数を呼び出すようにインターバルタイマーを仕掛けます。
pan(); setInterval(pan, 20*1000);
gooブログはping送信先に4ヶ所(gooを除いて)しか指定できません。4ヶ所じゃ足りないときは「Ping一括配信サービス Pingoo!」を使うという手があります。このブログもPingoo!を使っています。
gooブログのping送信先にPingoo!を指定しておくと、Pingoo!側でいろいろなところへまとめてpingを打ってくれます。Pingoo!のping送信先は20ヶ所ほどあり、その中から希望のping送信先を選択できます。
Pingoo!は無料ですが会員制です。gooブログの設定方法もスクリーンショットを使って丁寧に説明されていますので戸惑うこともないでしょう。
Pingoo!は以前からブログ界で話題になっていますので他のブログも探してみてください。Pingoo!にリンクしているブログを探してみました。下のリンクからたどれますので参考にしてください。
「AOLVS Ajax APIで日本語が使えた! サムネイルを表示してみる」の続きです。
「AOL Video Search AJAX API」を使ってサムネイルに加えて、ビデオの主要なデータをいろいろ表示してみました。↓こんな感じです。
表示してみたビデオの主要なデータは次のとおりです。
- Video.videoUrl
- ビデオの配信元ページへのURLです。URLはAOLを指していてAOLから配信元ページにリダイレクトする仕組みになっています。
- Video.channel
- ビデオの配信元サイトの名前です。「YouTube」「MySpace」「Google Video」などです。
- Video.channelUrl
- ビデオの配信元サイトのURLです。こちらは直リンクです。
- Video.dateFound
- ビデオがAOL Videoのインデックスに登録された日時です。
- Video.description
- ビデオの概要文です。文章の長さにはかなりのバラツキがあります。概要文がないことがあります。このときundefinedとなるので変わりに「(description)」と表示しています。
- Video.category
- ビデオのカテゴリです。カテゴリがないことがあります。このときundefinedとなるので変わりに「(category)」と表示しています。
- Video.filesize
- ビデオのファイルサイズです。いろいろな条件で検索してみましたが常にundefinedでした。
- Video.runtime
- ビデオの再生時間(秒)です。稀にundefinedになることがありますので、このとき変わりに「(runtime)」と表示しています。
- Video.formats
- ビデオのファイル形式です。「Win」「Flash」「Real」などです。undefinedになることがありますので、このとき変わりに「(formats)」と表示しています。
いろいろなサイトをインデックスしているからでしょうか。上のとおり、必ずしもデータが含まれるとも限らないようです。そのためソースコードではundefinedになることを考慮した作りが必要そうです。
こんなとき「prototype.jsのObject.extendで関数の省略値を補完する」のテクニックを使えばシンプルなソースコードにできますね。
「BLOGRANGER 2.0」の「BLOGRANGER API」を使って「BLOGRANGER ご当地ブログ探し」というAjaxアプリを作ってみました。↓こんな感じです。
キーワード検索のあと、日本地図の都道府県をクリックすると、そのご当地のブログ記事を絞り込めます。例えば「土産」というキーワードで検索してから都道府県をクリックすると、そのご当地を話題としたブログ記事が(きっと)見つかります。
このAjaxアプリは「BLOGRANGER API チュートリアル」のソースコードを土台に「都道府県でブログを絞り込む」という独自の機能を追加したものです。都道府県でブログを絞り込むというアイディアは、「BLOGRANGER API リファレンス」の中にある次の説明を参考にしました。
Ranger.Searchクラス hasNE(ne, [exact])
次の例は「アニメ」に関するブログ記事を検索しています。Ranger.NEと文字列を使う2通りの方法があります。このときカテゴリのIDを指定します。
次の例は「東京都(場所)」を含むブログ記事を検索しています。「東京都港区南青山」など「東京都」から始まる「場所」が検索範囲になります。
はじめのキーワード検索では、キーワードと「場所」という条件を指定しています。場所という条件を指定すると、「東京都」や「神奈川県」といった都道府県を含むブログがヒットすることが期待できます(たぶん)。
bs.hasKeyword(keyword);
bs.hasNE('LOCATION-');
bs.searchByKeyword('', 1, 10);
次の都道府県のクリックでは、キーワードと場所に加えて、そのクリックした都道府県の名前を指定しています。これでクリックした都道府県の名前を含むブログだけを絞り込めます。
bs.hasKeyword(keyword);
bs.hasNE('LOCATION-'+region);
bs.searchByKeyword('', 1, 10);
Special thanks to ... 日本地図のクリッカブルマップは全国なんでもクリッカブル・マップ・プロジェクツの素材を使いました。ありがとうございます。