2009/08/17

PhotoShareのブログパーツ2

追記:その3を書きました。
PhotoShareのブログパーツ、その2です。
その1はこちら。
画像を複数表示するようにしました。
今回はBlogger用に使い方を説明します。

その1:
レイアウト>ページ要素から、「HTML/JavaScript」ガジェットを好きな位置に追加して、以下のコードを貼付けます。
<div id="viewspace"></div>

レイアウト>HTMLの編集から、HTMLコードを表示させて、一番最後にある</body>タグの後ろに、以下のコードを貼付けます。
注:コード中の3という数字が表示する画像の数です。適当な数字に書き換えてください。

<!-- PhotoShareブログパーツ -->
<script type='text/javascript'>
function handlePhotoShare(data){
var eIMG = null;
var eA = null;
for(var i=0;i&lt;3;i++){
eIMG = document.createElement('img');
eIMG.src = data[i].thumbnail;
eIMG.border = "0";
eIMG.title = data[i].title;
eA = document.createElement('a');
eA.href = data[i].url;
eA.appendChild(eIMG);
var viewspace = document.getElementById('viewspace');
viewspace.appendChild(eA);
}
}
</script>
<script src='http://feeds.bcphotoshare.com/users/114653.js' type='text/javascript'/>


しかし、たったこれだけのことをやるのに、ずいぶんはまりましたw
その1:BloggerのXHTML仕様の厳密さにやられました。
””や’’の入れ子がBloggerのガジェット内でパースされるときに正しく解釈されない。。
その1のときは、なんとかだましだましやってたけど、コード量がちょっと増えるともう完全にアウト。これには参った。
結局、””や’’の入れ子にならないように、ちゃんとDOMで書いた。
その他、厳密な書き方は以下。
くりぼうさんのブログにはいつも助けられてます。
http://blogger.kuribo.info/2006/02/blog-post.html
その2:for文のエスケープ
for文の中の"<"に気付けなかった。
結局、for(var i=0;i&lt;3;i++){}と書いたらOKだった。
その3:このブログを書くのに、<>をサニタイジングしたり&ltを逆サニタイジングしたりするのに、頭がこんがらがったw

ブログパーツひとつ公開するのにも、色々大変だということがわかったw

0 件のコメント: