BLOGGERクラシックテンプレート 最近のコメントの取り出し

BLOGGERのFTP公開typeのクラシックテンプーレートのカスタマイズ。

最近のコメント問題を参考にJSONを使いJAVASCRIPTでFTP公開サイトでもサイドバーの好きな位置にテンプレートに書き込めば表示されます。

下記の場合は5件のみ表示し、日付を[yy-mm-dd]の表示文字数にしています。

<h2 class="sidebar-title">直近のコメント5件</h2>
<div id="recent_comment_list"></div>
<script type="text/javascript"><!--
function recent_comment_callback(obj) {
var data = obj;var statusHTML = '<ul>';
for (var i=0; i<data.feed.entry.length; i++) {
statusHTML+= ('<li><a href="'+data.feed.entry[i].link[0].href+'">');
statusHTML+= (data.feed.entry[i].summary.$t.substring(0,32));
if (data.feed.entry[i].summary.$t.length > 32) {
statusHTML+= ('...');
}
statusHTML+= ('<\/a><br \/>');
statusHTML+= ('<span class="item-date">['+data.feed.entry[i].published.$t.substring(2,10)+']<\/span>');
statusHTML+= ('by<span class="item-author"> '+data.feed.entry[i].author[0].name.$t+'<\/span>');
statusHTML+= ('<\/li>');
}
statusHTML += '<\/ul>';
document.getElementById('recent_comment_list').innerHTML = statusHTML;
}
--></script>
<script type="text/javascript" src="http://www.blogger.com/feeds/自分のblogID/comments/summary?alt=json-in-script&callback=recent_comment_callback&max-results=5"></script>

BLOGGER ページurlの取り出し

タイトルに対してそれ自身のURLの取り出しはJavascriptでテンプーレートで使われているtitle=permanent linkを利用して取り出しています。

window.onload=function(){
var linkNode=document.getElementsByTagName("a");
for(var ii=0;ii<linkNode.length;ii++){
if(linkNode[ii].title=="permanent link"){
var ele = document.createElement("span");
  ele.innerHTML = "<input type=\"text\" name=\"url\" size=\"80\" value=\""+linkNode[ii].href+"\" onfocus=\"this.select()\" />";
linkNode[ii].parentNode.appendChild(ele);
}}}

あし@はりつけ

あし@を貼り付けたのはいいが、レイアウトの自由度が無いので少しいらってみた。
position: relative の配下に position:absolute であし@のプログラムでの書き込みをしたら
好きな位置に持ってこれますよ~

って2日かかった・・・

マウス座標を収得してその位置にプロフィールを表示するようにしようとしたが・・・

cssでpositionの指定は親要素も関係するってどこかでみたので、うちの場合は(relativeで指定)
idをつけたタグの子要素に書き込むように少しプログラムを書き換えて、
その下にがくるように配置した。

とりあえず、気が向いたら色味を修正しようかと思う。

さっこれから仕事のデータ入力しようっと。

javascriptで簡単設定イメージ画像拡大スクリプト

イメージを拡大表示するのにおしゃれなのは、lightboxhighslideがありますがページの修正やcssの追加とか、タイプによればaltの設定とかid、class属性の追加など表示枚数が少なければいいが、100枚、200枚となってくるとちょっと…、
というわけでシンプルに組み込めるのを作ってみました。
CB1300SF とりあえずimgpickup_shadow.jsをダウンロードして(UTF-8で保存)
<head>…..</head>の間に、
<script src=”http:**アドレス**/imgpickup_shadow.js” type=”text/javascript”></script>
と挿入するだけでリンク属性が画像を指している場合は勝手に背面にシャドーがかかり画像が中央に表示されます。
DOCTYPEの指定無しタイプも作動します。(多分)IE7,IE6とFF2でテスト済み。

不具合は保障しませんけど、使いたい方は使ってください。
質問はコメント欄へお願いします。

  • onloadで他に命令されている場合はうまくいかないときもあります。
  • リンクに設定されているのonclickよりも優先します。

JavaScript でURLエンコード

ページ毎のアクセスログを採るのに1ページずつは面倒だからjavascriptを読み込ませて、
タイトルとUTLを記録させているが、これがいつも、タイトルの日本語が文字化けしていた。

下記のサイトにあるように
JavaScriptにおけるURLエンコードの処理

JavaScriptでは当初はescape()とunescape()のグローバル関数がそのような目的で使われることがありました。しかしこれらの関数は完全なURLエンコード対応でない上に、その関数の定義が途中で変わってしまい、お勧めできません。

ってことでescape()では使い物にならず、utf-8に変換して、cgi側で日本語に戻すようにしている。