「フレームラックPlat`HomeバージョンVer.2(PF59E-09-83B Ver.2)」のオプションに「Human フレームラック用ガイドレール(SCS-625)」がありますが、ぷらっとホームサイトの商品情報だけでは、どのような商品なのか把握しにくい印象がありますので、参考としていくつか写真を紹介しておきます。
↓次のように梱包されて届きます。
↓右側のラベルを拡大したものです。
↓ガイドレール、ビスとナットが含まれます。それ以外は何も付属されません。
↓取り付け用のビスとナットは4組です。
↓左右のガイドレールです。
この商品で気になることがありましたらトラバやコメントをください。いろいろな角度から紹介したいと思います。
「del.icio.usのブックマークに言及しているブログをBLOGRANGER APIで検索する」の続きです。あなたやお好きなdel.icio.us userを指定できるように改良してみました。↓こんな感じです。
次のとおり、「ranger.cgi?」に続けてdel.icio.us userを指定します。ここでは「developmentor」を指定しています。なお、省略したり、書式に誤りがあるときは「developmentor」になります。
http://developmentor.lrlab.to/delicious/blogranger.cgi?developmentor
次のようなCGI/perlスクリプトで実現しています。JavaScritpコード中でquery_stringを取り出す方法を使って、JavaScriptコードのみで完結してもよかったのですが、なんとなく脆弱な印象があったのでCGI/perlという形にしました。
#!/usr/bin/perl #!perl ## ## blogranger.cgi ## ## Copyright(C) 2006 DEVELOPMENTORLEARNING RESOURCE LAB. ## http://blog.goo.ne.jp/developmentor/ ## ## This code cannot be redistributed without ## permission from blog.goo.ne.jp/developmentor/ ## ## v1.00 2006/12/13 00:00:00 ## use strict; use CGI qw(:standard); $CGI::POST_MAX=1024*1024*1; #1MB use CGI::Carp qw(fatalsToBrowser); ## my $kanjicode = 'utf8'; my $charset = 'UTF-8'; my $dir_tmpl = '.'; ## &main; exit; ## sub main { my $user = param('keywords'); $user = 'developmentor' if $user !~ /^[a-z0-9_.]+$/; my $html = &load_template('blogranger', user => $user ); print CGI::header( -type => 'text/html', -charset => $charset ); print &kanjicode($html, $kanjicode); } ## sub load_template { my ($name, %param) = @_; use HTML::Template; my $template = new HTML::Template( filename => "$dir_tmpl/$name.tmpl", die_on_bad_params => 0, global_vars => 1, ); $template->param( %param, ); return $template->output; } ## sub kanjicode { my ($textref, $kanjicode) = @_; use Jcode; &Jcode::convert($textref, $kanjicode); return $$textref; } "True Value";
HTMLテンプレートファイルが見たい方は、次のアドレスからどうぞ。
「del.icio.us JSON Feedsを使ってブックマークをサムネイル付きで表示する」の続きです。
さらにこのブックマークに言及しているブログを検索するように改良しました。ブログ検索は「BLOGRANGER 2.0」の「BLOGRANGER API」を使っています。del.icio.usとBLOGRANGER 2.0をマッシュアップしたAjaxアプリってところでしょうか。↓こんな感じです。
キーワードとURLの2通りの方法で検索できます。 フォームからキーワードで検索すると、そのキーワードでブログを検索して上位10件を表示します。またフォームからURLで検索すると、そのURLをリンクしたブログを検索して同じく上位10件を表示します。
ページ左にブックマークをリスト表示しています。レイアウトの都合でサムネイルのみで表示しています。その変わりにブックマークのタイトル(descriptionともいう)はツールチップで表示するようにしてあります。ブックマークのサムネイルをクリックすると、そのブックマークのURLでブログを検索して上位10件を表示します。つまり、そのブックマークを言及しているブログが検索できるということです。
BLOGRANGER APIは次のように使っています。
はじめにscript要素でBLOGRANGER APIをロードします。BLOGRANGER APIをロードすると合わせてprototype.jsもロードされますので、以下のJavaScriptコードではprototype.jsも活用しています。
<script type="text/javascript" src="http://ranger.labs.goo.ne.jp/rpc/api.php"></script>
ブログ検索を使うためRanger.BlogSearchオブジェクトを生成し、検索結果を受け取るイベントハンドラ関数を指定します。ここでは後述の「onupdateblogs関数」を指定しています。
getblogs = new Ranger.BlogSearch(); getblogs.successHandler(onupdateblogs);
検索ボタンもしくはサムネイルをクリックすると、キーワードもしくはURLを指定してブログを検索します。ここでは最大10件のブログを要求しています。「http://」か「https://」で始まる文字列はURLとして、それ以外はキーワードとして判断しています。正規表現のところがそれです。
getblogs.hasKeyword(keyword.match(/^https?:///)
? '' : keyword);
getblogs.hasLink(keyword.match(/^https?:///)
? keyword : '');
getblogs.needsTitle();
getblogs.needsBlog();
getblogs.needsBody(200);
getblogs.needsDate();
getblogs.searchByKeyword('', 1, 10);
検索結果を受け取るイベントハンドラ関数です。検索結果のブログをリスト表示します。ここではブログのタイトル、サイト名、本文、更新日付を表示しています。タイトルをクリックすると、そのブログを表示します。またサイト名をクリックすると、そのサイト(ブログのトップともいう)を表示します。なお、検索結果のブログが0件のときは「(no blogs)」というメッセージを表示します。
function onupdateblogs(result) {
Element.hide('blogs-indicator');
if (result.totalResults==0)
return $('blogs').innerHTML = '(no blogs)';
$('blogs').innerHTML = '';
$('blogs').appendChild(result.results.inject(
document.createElement('ul'), function(ul, v) {
// url+title
var a = document.createElement('a');
a.href = v.url;
a.appendChild(document.createTextNode(v.title));
var entry = document.createElement('div');
entry.className = 'entry';
entry.appendChild(a);
// blogurl+blogname
var a = document.createElement('a');
a.href = v.blogurl;
a.appendChild(document.createTextNode(v.blogname));
var blog = document.createElement('div');
blog.className = 'blog';
blog.appendChild(a);
// body
var body = document.createElement('div');
body.className = 'body';
body.appendChild(document.createTextNode(v.body));
// date
var date = new Date();
date.setTime(v.date*1000);
date = date.toLocaleString();
var rel = document.createElement('div');
rel.className = 'rel';
rel.appendChild(document.createTextNode(
date + ' - ' + v.score
));
//
var li = document.createElement('li');
li.appendChild(entry);
li.appendChild(blog);
li.appendChild(body);
li.appendChild(rel);
ul.appendChild(li);
return ul;
}));
}
ここで使ったdel.icio.usのusernameは「developmentor」です。JavaScriptコード中の「developmentor」を別のusernameに変更(2ヶ所ほど)してみてください。あなたのブックマークを使ってブログが検索できるようになりますよ。
「del.icio.us JSON Tag Feedsを使ってビデオを検索する」の続きです。「AOL Video Search」と「goo ラボ BLOGRANGER 2.0」をマッシュアップしてみます。
BLOGRANGER APIを使って関連トピックスを表示し、AOL Video Search Ajax APIを使ってそのトピックでビデオを検索できるように改良しました。↓こんな感じです。
BLOGRANGER APIの「Ranger.TopicMiningクラス」を使って関連トピックスを取得し、その関連トピックスをWEBページ右にリスト表示します。トピックをクリックすると、そのトピックをキーワードに見立ててAOL Video Search Ajax APIの「getVideosメソッド」を使ってビデオを再検索します。また、このとき関連トピックスも再検索します。
BLOGRANGER APIのRanger.TopicMiningクラスは次のように使っています。
はじめにscript要素でBLOGRANGER APIをロードします。ちなみにBLOGRANGER APIをロードすると合わせてprototype.jsもロードされるので、前回までロードしていたprototype.jsは削除しました。
<script type="text/javascript" src="http://ranger.labs.goo.ne.jp/rpc/api.php"></script>
Ranger.TopicMiningオブジェクトを生成し、検索結果の関連トピックスを受け取るハンドラ関数を指定します。ここでは「onupdatetopics関数」を指定しています。
gettopics = new Ranger.TopicMining(); gettopics.successHandler(onupdatetopics);
Search Videoボタンもしくはトピックをクリックすると、くるくる回るインジゲータを表示し、キーワードを指定して関連トピックスを検索します。ここでは最大15件のトピックを要求しています。
Element.show('topics-indicator');
gettopics.miningByKeyword(keyword, 15);
検索結果の関連トピックスを受け取るハンドラ関数です。「result.results」を繰り返しながら関連トピックスをリスト表示します。なお、関連トピックスが0件のときは「(no related topics)」というメッセージを表示します。
このコードはprototype.jsを使っています。「injectメソッド」を使って関連トピックのリストを生成し、そのリストをHTMLとして結合しています。関連トピックスのカテゴリとキーワードは「escapeHTMLメソッド」を使ってエスケープしています。
function onupdatetopics(result) {
Element.hide('topics-indicator');
if (result.totalResults==0)
return $('topics').innerHTML = '(no related topics)';
var html = result.results.inject('', function(s, v) {
return s + '<li><a '
+ ' href="#'+encodeURIComponent(v.word)+'" '
+ ' onclick="return update(this.firstChild.nodeValue);">'
+ v.word.escapeHTML()
+ '</a> -- '+v.category.escapeHTML()
+ '</li>';
});
$('topics').innerHTML = '<ul>'+html+'</ul>';
}
使ってみるとわかりますが、関連トピックスをクリックしても一般的なキーワードしかヒットしません。AOL Video Searchの日本語インデックスが不足しているからかな。海の向こうのサービスを使うとき、言語圏の違いなどローカルなデータを使っての連携は難しい・・・う～む。キーワードを翻訳してから検索してみるとか。和英辞書Ajax APIなんかないかなぁ。
テレビCMで流れている「健康応援レシピ1000 DS献立全集」を予約しました。
健康応援レシピ1000 DS献立全集 |
しゃべる!DSお料理ナビ |
「しゃべる!DSお料理ナビ」は料理の仕方をサポートすることが目的でレシピも200品目程度でした。「健康応援レシピ1000 DS献立全集」はレシピが中心のようですね。オレンジページ監修ということで、冊子を使うのと比較して、どのくらいDSを活かしているかそのアイディアがとても気になります。
「AOLVS Ajax APIで関連タグを表示、そしてビデオを検索する」の続きです。del.icio.usとマッシュアップしてみます。
さらにdel.icio.usの「JSON Tag Feeds」を使った自分のタグを表示し、「AOL Video Search Ajax API」を使ってそのタグでビデオを検索できるように改良しました。↓こんな感じです。
JSON Tag Feedsを使って自分のタグを取得し、そのタグをWEBページの右下にリスト表示します。タグをクリックすると、そのタグをキーワードに見立ててAOL Video Search Ajax APIの「getVideosメソッド」を使ってビデオを再検索します。
del.icio.usの「JSON Tag Feeds」は次のように使っています。
「JSON Tag Feeds」は次のようなscript要素で取り込みます。アドレス中の「developmentor」はdel.icio.usの「username」に対応しますので、あなたのusernameに置き換えてみてください。「countパラメータ」は取り込むタグの数を表します。「sortパラメータ」はタグの並び順を表します。ここではタグ付け数を指定しました。他にアルファベット順も指定できます。「callbackパラメータ」を使えばJSONPもできますが、ここでは使っていません。
<script type="text/javascript" src="http://del.icio.us/feeds/json/tags/developmentor?count=20&sort=count"></script>
このscript要素は次のような「Delicious.tagsオブジェクト」を出力します。Delicious.tagsのプロパティがタグで、その値がタグ付け数になります。いわゆるタグとタグ付け数のハッシュテーブルです。
if(typeof(Delicious) == 'undefined')
Delicious = {};
Delicious.tags = {
"Ajax": 8,
...
}
Delicious.tagsを繰り返しながらタグをリスト表示します。このコードはprototype.jsを使っています。「$H」を使ってハッシュテーブルに変換し、「eachメソッド」とDOMを使ってタグのリストを生成しています。
<script type="text/javascript">
var ul = $('mytags');
$H(Delicious.tags).each(function(pair) {
var a = document.createElement('a');
a.href='#'+encodeURIComponent(pair.key);
a.onclick = function(e) {
return update(pair.key);
};
a.appendChild(document.createTextNode(pair.key +' ('+pair.value+')'));
var li = document.createElement('li');
li.appendChild(a);
ul.appendChild(li);
});
</script>
del.icio.usのほかにも、検索キーワードに使えるデータを出力するサービスがあれば、同じような手順で簡単に追加できると思います。試しに「BLOGRANGER 2.0」の「トピックマイニング」を使ってRelated Topicsなんてのも表示してみようかな。できたらまた紹介します。
「AOL Video Search Ajax API」の「getRelatedTagsメソッド」を使ってみました。↓こんな感じです。
フォームからキーワードを送信すると、そのキーワードでビデオを検索し、そのビデオのサムネイルを表示します。サムネイルをクリックすると、そのビデオを再生します。
同時にgetRelatedTagsメソッドを使ってビデオの関連タグを取得し、そのタグをリスト表示します。タグをクリックすると、そのタグをキーワードに見立ててビデオを再検索します。
getRelatedTagsメソッドは次のように使っています。
検索ボックスのキーワードを指定してgetRelatedTagsメソッドを呼び出します。このとき0件目から50件分の関連タグを要求しています。ちなみに最大は50件みたい。
gettags = new AOLVideoSearch('6ho3uxb4tv6zo1zzz');
gettags.attachEvent('onupdate', 'onupdatetags();');
gettags.initialize();
...
gettags.getRelatedTags(document.form.keyword.value, 0, 50);
検索した関連タグをリスト表示します。関連タグのオブジェクトモデルは「getVideoメソッド」と同じなので、ビデオと同じようなコードで関連タグのリストも表示できます。なお、このコードはprototype.jsを使っています。
function onupdatetags() {
if (gettags.TagSet.totalResultsReturned==0)
return $('tags').innerHTML = '(no related tags)';
var html = gettags.TagSet.Tag.inject('', function(s, v) {
return s + '<li><a '
+ ' href="#'+encodeURIComponent(v.name)+'" '
+ ' onclick="return update(this.firstChild.nodeValue);">'
+ v.name
+ '</a> ('+v.count+')'
+ '</li>';
});
$('tags').innerHTML = '<ul>'+html+'</ul>';
}
TagSet.Tag[n]という関連タグオブジェクトのプロパティは次のとおりです。