WWW.AKIRAFUKUOKA.COM BLOG

Google AJAX Search API - Blog Bar Wizard

Google Blog BarをMovableTypeと連動させてみる。

2007.03.21 JavaScript

Googleブログパーツ

我らがGoogleよりまた面白い（けど地味な）ものがリリースされたのでご紹介。

Googleの検索結果を表示するブログパーツ。AdSense風のタイプとAppleのHotNews風の2種類。ま言ってみれば何のことはない、という感じですが、JavaScriptを用いて文字がフェードイン・フェードアウトで現れたり、更新された時間が表示されたりと、シンプルながらなかなか芸の細かいブログパーツであります。

で、Googleのサイトを見るに基本的な使用例としては、あらかじめ表示されるキーワードを選択し（例えば「Apple」「Google」「Microsoft」等）、そのキーワードをランダムで表示させるつもりらしい。確かにそれはそれでいいんですが、キーワードを変えたいときが面倒くさくない？とか、ただそれだけじゃあんまり面白くなくない？とも思ったり。せっかくブログパーツなんだから、ブログと連動した使い方はないものか…。

MovableTypeのエントリー記入欄には キーワード という項目があり、ここにはブログ内検索用の語句を記入します。ただ、このキーワードをいまいち活用できた試しがない（いやSEO対策にはなるんでしょうけど）。しかも記入するのがめんどくさくて空欄にしてしまうこともしばしば。…ということでどうせならこのエントリーごとのキーワードを用いて先ほどのブログパーツを表示させたら関連リンクみたいで面白いんじゃない？てことでGoogleのページで取得できるブログパーツのソースコード内のLoadBlogBar()部分を下記の様に書き換えました。もちろんMovableTypeテンプレート専用。

function LoadBlogBar() {
　var blogBar;
　var options = {
　　　largeResultSet : false,
　　　title : "<$MTBlogName$>",
　　　horizontal : true,
　　　orderBy : GSearch.ORDER_BY_DATE,
　　　autoExecuteList : {
　　　executeList : ["<$MTEntryKeywords$>"]
　　}
　}
　blogBar = new GSblogBar(document.getElementById("blogBar-bar"), options);
}

本当にプチハック。でもAdSense広告じゃない、ブログ内容と連動したパーツっていうのは意外と今までなかった気がしますね。

ちなみにGoogle Blog Barに近いものにGoogle News Barがあります。要するにサイト検索ではなくGoogleニュース検索になったものですね。サイトの種類によってはこっちの方が向いている場合もあるかも。いろいろ試してみましょう。

Comment [3]

非常に地味ですがHitokoto mini.がアップデート。

2007.02.10 JavaScript

Hitokoto_mini

WWW.AKIRAFUKUOKA.COM BLOG右に鎮座している通称「Hitokoto mini.」ですが、今までFlashで表示していたのを思い切ってJavaScriptで表示させてみました。今までは過去30件分を表示していましたが、JavaScript版から3件に絞りました。それでもFlash版だと回線状況が悪いときにフリーズすることもあったので、機能的にはアップデートと捉えてくださいまし。技術的には前回のアフィリエイトの時と同じです。

当ブログのおかげでだいぶ影が薄くなったHitokoto.ですが、写真日記とかこれで十分できるんですよね。最近は自分から新しいサービスが展開できないかちょっと考え中。例えばHitokoto.を携帯日記サービスにするとかね。で自分のブログにブログパーツとして貼れる、みたいな。もちろんどれくらいそれをほしいと思うユーザーがいるか、サーバーの問題は？等考えなきゃいけない部分は多いのでおいそれとできることじゃないんだけど、そろそろそういうことやってみないとなと。前厄の今年はチャレンジチャレンジ。

Alexa Bookmarklet ＜トラフィック詳細版＞

Alexa Bookmarklet ＜トラフィック詳細版＞

2007.02.02 JavaScript

Another Bookmarkに現在見ているページのAlexa Overviewページにジャンプするブックマークレット（を紹介しているページ）が紹介されていたので、ちょこっと改造してトラフィック詳細ページへ直ジャンプするものを造ってみました。

ブックマークレットをブラウザに登録するには上記リンク部分をブックマークバーへドラッグすればOK。ちなみにWWW.AKIRAFUKUOKA.COMでは使わないように。Alexaに「おめ知らねーよ」って言われて恥ずかしいから。そもそもAlexaって何？って人はあんま詳しくないけど以下リンク。

JavaScriptでRSSをランダム表示する。いまさら。

2007.01.27 JavaScript

アフィリエイト始めました

遂にWWW.AKIRAFUKUOKA.COMにも恐ろしいアフィリエイトの波が…高度化するネットワークを巻き込みながら暴走する資本主義社会はもう誰にも止められn はいフクオカアキラです。お金が儲かるから云々という理由ではなく、単純に何か人にお薦めできるスペースがあったらいいなーということでアフィリエイトスペースを設けました。ランダムでフクオカアキラおすすめのアイテム（ガジェット中心かな）が表示されます。でもあまりにもバナー広告っぽすぎるとつまんないし雰囲気も出ないので、ちょっとしたミニコーナーな感じにしてみました（ダカフェ日記様を参考に…）。あとその下にGoogle Adsenceも付けてみた。けどこっちは実験の意味合いが強い。とりあえず「ガンダム」というキーワードはむっちゃ反応しやすいことはわかった。

で、このランダム表示型アフィリエイトスペースを作るために、「RSS(XML)を読み取りそのエントリーの中からランダムで一つを表示させるJavaScript」が必要だったので作ってみました。ちなみにこのJavaScriptにはJKL.ParseXMLが必要なので事前にダウンロードしておきましょう。JKL.ParseXMLは簡単にいうとXMLを配列にしてくれるもの。これでXMLの扱いがだいぶ楽になります。で、実際に私が書いたJavaScript、pasteAffiliate.jsはこんな感じ。

function pasteAffiliate(id,xml_url){
var url = xml_url;
var http = new JKL.ParseXML( url );
var func = function ( tree ) {
var elem = document.getElementById(id);
var num = Math.floor(Math.random()*tree.rss.item.length);
var desc = tree.rss.item[num].description;
elem.innerHTML = desc;
}
http.async( func );
http.parse();
}

で、実際に使うときはこんな感じにhtmlに貼付けます。

<div id="affiliate"></div>
<script type="text/javascript" src="jkl-parsexml.js"></script>
<script type="text/javascript" src="pasteAffiliate.js"></script>
<script></script>

概要を説明しますと、RSS(rss.xml)を読み込み、その中のエントリーをランダムで選択、選択されたエントリーのdescription部分をhtml(id="affiliate"の部分)に貼付け。こんな具合です。私はJavaScriptに関しては幼稚園の年少組なのでもっと効率のいい方法があるかもですが、このスクリプトはブログではいろいろ使えそう。例えばヘッダー画像をランダムで表示、とか。