ひとまず表示は出来たのでメモ。
ほるめすメモ帳inBlogger - 投稿一覧
今回はiPhone、PCSafari、Firefoxで表示しました。
IE等はただリストで表示されるだけです。
iPhoneで表示した場合です。
上バータイトルがすり切れているのは、ただ単に長すぎるからです。
実際の処理としては、BloggerAPIとiUIを混ぜ合わせただけなのですが、
色々と困ったことがあったのでまとめます。
document.createElementから、
必要なタグを生成して差し込もうとしましたが、
<ul>を差し込む場合、
selected="true"が追加されませんでした。
objul:ulタグとすると、
objul.selected="true";では処理がされなかったワケです。
原因はおそらく、ulタグにselectedが標準でない(iUI用に勝手に作成した)ためです。
仕方がないので
<ul selected="true"></ul>とだけ元から作成しておき、
document.getElementsByTagName("ul").item(0)で呼び出しました。
これはPCSafariで表示した図。
なぜか上バータイトルが表示されません。
これはFirefox。
下の方に表示されているのは「Firebug」と言われるデバッグツールですね。
今回JSで処理したので、実際に処理が通っているのか、
表示がきちんとされているのかをチェックするために使用しました。
投稿の一覧表示自体は出来ましたが、これを今度各投稿を表示しないといけないですね。
以前に試してみましたが、途中でエラーが発生してそのまま停止してました。
諸々起こりそうな問題としては、かなりロードに時間がかかるかもしれないこと。
当然今回と同じようにJSで投稿を「同htm内」にロードしないといけないので、
今回表示する際(iPhoneでは10秒ほど)以上に時間がかかります。
さらに僕はiPhone3Gなので、メモリを大量消費した際の他の動作も気になります。
と言うような感じで、実は思ったよりiPhoneへの負担の大きいページが完成しそうです。
以下が今回の<body>以下のソースです。
▼続きを読む/たたむ
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
<ul selected="true"></ul>
<script type="text/javascript">
var bloggerService = new google.gdata.blogger.BloggerService('GoogleInc-jsguide-1.0');
var feedUri = 'http://holmes21.blogspot.com/atom.xml';
var handleBlogPostFeed = function(postsFeedRoot) {
var posts = postsFeedRoot.feed.getEntries();
// タグ生成生成
var objul = document.getElementsByTagName("ul").item(0);
objul.id = "home";
objul.title = postsFeedRoot.feed.getTitle().getText();
// タグ内投稿一覧生成
var html = '';
for (var i = 0, post; post = posts[i]; i++) {
var postTitle = post.getTitle().getText();
var postURL = post.getHtmlLink().getHref();
html += '<li><a href="' + postURL + '" target="_self">'
+ postTitle + '</a></li>';
}
objul.innerHTML = html;
};
var handleError = function(error) {
// エラー処理
var objul = document.getElementsByTagName("ul").item(0);
objul.id = "home";
objul.title = "表示エラー";
objul.innerHTML = "表示エラーです";
};
// ここで実行
bloggerService.getBlogPostFeed(feedUri, handleBlogPostFeed, handleError);
</script>
投稿
0 件のコメント:
コメントを投稿