とりあえず完成版でいいかな？と思っていた、はてなハイクのブログパーツ。
ただ、本家Twitterに比べ、決定的に劣っているものがありました。
このまま完成版にするわけにはいきません。
Twitterのブログパーツ
はてなハイクのブログパーツ0.1
まず、本家Twitterに比べ、決定的に劣っている点について。
それはこの“** days ago”と、エントリーが更新された時間を明らかにするもの。
通常のblogと違い、yyyy/mm/dd等の表記方法で行わないのがポイントらしい。
JavaScript による日付・時刻・時間の計算・演算のまとめ
http://www.hoge256.net/blog/2007/08/javascript_1.html
そこで、このサイトに掲載されていたscriptを借りて、
はてなハイクのブログパーツを作り直してみた。
はてなハイクのブログパーツ0.3
http://sites.google.com/site/ochiyuki/tst_hatenahaikublogparts03.html
var dd = new Date(entry.publishedDate);
date=compareDate(now.getYear(), now.getMonth()+1, now.getDate(), dd.getYear(), dd.getMonth()+1, dd.getDate())+" 日前";
document.getElementById("feed").innerHTML+="<div>"+entry.content+"</div><div style=text-align:right;font-size:small;>"+date+"</div>";
フィードからエントリーの日付を取得し、変数ddへ格納。
そこから引数を揃え、借りてきた関数compareDateに渡す。
結果を変数dateに格納し、いままでのものと一緒に出力する。
関数compareDateを作ってくださった方のおかげで簡単にいけました。
ありがとうございます。
また、各々のブログパーツを生成するためには以下のものを利用する。
http://sites.google.com/site/ochiyuki/tst_hatenahaikublogparts04.html
使い方ははてなハイクのブログパーツ0.2と同じ。
最近気づいたのだが、“表示テスト”は多くのブラウザで利用できない様子。
オマケ機能だから、構わないか…？
完成版では、削除することにする。
続き
必要なのは、はてなのアカウント、Googleが発行するkey。
これが前回の結論です。
その2つをははてなハイクのブログパーツ0.1に渡すにはどうすればいいのか、考えてみました。
これらは、私が用意することが出来るものではない。
入力してもらうしかない。
ということで、以下のテスト版、はてなハイクのブログパーツ0.2を制作した。
http://sites.google.com/site/ochiyuki/tst_hatenahaikublogparts02.html
利用するためには、はてなのアカウント、Googleが発行するkeyを用意する。
はてなのアカウント
https://www.hatena.ne.jp/register
Googleが発行するkey
http://code.google.com/apis/ajaxfeeds/signup.html
それらをフォームに入力し、“ブログパーツ制作”を押す。
すると、“ブログパーツ”のフォームに、ソースが出力される。
これをブログに貼れば、その人のブログにはてなハイクを貼ることができる。
ちなみに、“表示テスト”ははてなのアカウントのみの入力でも可能。
続き
前回作ったはてなハイクのブログパーツ0.1は、私のはてなハイクのみをこのブログでのみ取得します。
しかし、誰もが自分のブログにはてなハイクを取得させられるようにしたい！
そこで、前作の反省をし、改善すべき点を考えていきます。
はてなハイクのブログパーツ0.1は、JavaScriptで書いている。
JavaScriptは、扱いも制作も楽だし、サーバーにも優しい。
ただ、厄介なのが外部ファイルの扱い。
ActionScriptでもそうなのだが、JavaScriptではドメインの違うサーバー上のファイルの読み込みが原則出来ない。
そのため以前は、アウトプットはJavaScript、ファイルのやりとりはPHP、とサーバーサイドスクリプトの力を借りて、この手の問題を解決していた。
ただ、現在はとても便利なものがある。
Google AJAX Feed APIだ。
これは、Googleに生成されたキャッシュへ、Googleが許可したサーバーがアクセスするという形をとる。
アクセスされるサーバーがアクセスするサーバーに許可を与えている場合、上記の制約の例外になるため、JavaScriptのみでファイルの読み込みが出来るのだ。
また、Googleはフィードリーダーのサンプルソースも公開している。
実ははてなハイクのブログパーツ0.1は、これをちょっといじったものに過ぎない。
変更したのは、変数に格納するデータと、その出力方法だ。
Googleのサンプルソース（の一部）
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
var div = document.createElement("div");
"feed"というidのdiv要素中に、div要素を作り
div.appendChild(document.createTextNode(entry.title));
entry.titleをテキストとして格納している。
ただ、はてなハイクのようなミニブログの場合、タイトルに重要な意味はない。
ここで欲しいのは、記事だ。
ちなみにTwitterの場合、そもそもエントリーごとのタイトルは存在しない。
また、テキストとして格納しているため、記事中でHTMLなどが利用されている場合、タグがむき出しになってしまう。
つまり、ちゃんとタグが機能しなくなってしまう。
これでは、はてなハイクの長所であるお絵かき機能の意味がない！
これらを踏まえて、以下のように改善した。
はてなハイクのブログパーツ0.1（の一部）
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
document.getElementById("feed").innerHTML+="<div>"+entry.content+"</div><div>---</div>";
}
document.getElementById("feed").innerHTML+="<div>"+entry.content+"</div><div>---</div>";
"feed"というidのdiv要素のinnerHTMLに、直接entry.contentを格納している。
記事をHTMLタグそのまま格納することで、上記の問題を解決できた。
var feed = new google.feeds.Feed("http://h.hatena.ne.jp/ochiyuki/.rss");
出力はこれでかまわない。
ただ、入力できるものが私のはてなハイクのフィードだけだというのは、問題だ。
扱うフィードを、ソースの中に直接記述していることは、1つ目の改善すべき点だ。
<script type="text/javascript" src="http://www.google.com/jsapi?key=*****"></script>
また、これはブログごとにGoogleが発行するkeyを必要とする。
私のブログのkeyを、ソースの中に直接記述していることは、2つ目の改善すべき点だ。
次回は、このあたりを改善して作ってみようと思います。
続き
