人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

はてなダイアリーの記事のリンクをHPに掲載したいと考えています。
はてなダイアリーから出力されるRSSをHTMLに変換するプログラムを作ってください。

■条件
1.掲載するサイトの文字コードはシフトJIS
2.任意で記事のタイトルのフォントや色、文字数を設定したい。(CSSで変更でも可)
3.言語はjavaスクリプト

■参考
下記のサイトを使用して出力されるような型を希望しています。
http://www.rss25.com/
http://seosearch.biz/rss.htm

■注意
はてなダイアリーの文字コードは、EUCです。


宜しくお願い致します。

●質問者: ???
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS EUC Hp HTML Java
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Galapagos
●0ポイント

Ajaxを使おう RSSリーダーを作る」を参考にしてください。

◎質問者からの返答

誠に恐縮ではありますが、参考ページを回答に求めておりません。


2 ● rouge_2008
●450ポイント ベストアンサー

次のページで紹介されていた「Google AJAX Feed API」を使用して作ってみました。

http://tpfields.xrea.jp/javascript/load-external-rss-by-javascri...

・「Google AJAX Feed API」

http://code.google.com/intl/ja/apis/ajaxfeeds/

・スクリプト(※head要素内に記述します。)

 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">

 google.load("feeds", "1");

 function initialize() {
 // 次でRSSのURLを指定します。(※はてなダイアリー以外も大丈夫です。)
 var feed = new google.feeds.Feed("http://d.hatena.ne.jp/ユーザーID/rss2");
 // 次でエントリーの表示数を指定します。(※RSSで取得できる分が最大です。)
 feed.setNumEntries(7);
 feed.load(function(result) {
 if (!result.error) {
 // 次で記事タイトルの表示最大文字数を指定します。
 var tmax = 25;
 var container = document.getElementById("feed");
 var title = result.feed.title;
 var h3 = document.createElement("h3");
 h3.innerHTML = title+"の新着エントリー";
 container.appendChild(h3);
 var wrap = document.createElement("ul");
 wrap.setAttribute("id","entry-list");
 container.appendChild(wrap);
 for (var i = 0; i < result.feed.entries.length; i++) {
 var entry = result.feed.entries[i];
 var item = document.createElement("li");
 var ttxt = entry.title;
 var ttxt2 = ttxt.replace(/\[.+\]/, "");
 if(ttxt2.length > tmax) {
 ttxt2 = ttxt2.substring(0, tmax) + "...";
 }
 var date = new Date(entry.publishedDate);
 var y = date.getFullYear();
 var m = date.getMonth()+1;
 var d = date.getDate();
 var w = date.getDay();
 var jw = new Array("日","月","火","水","木","金","土");
 var postdate = y +"年"+ m + "月" + d + "日" + "(" + jw[w] + ")";
 item.innerHTML = "<a href='" + entry.link + "' target='_blank'>" + ttxt2 + "</a>" + "<br>" + postdate;
 wrap.appendChild(item);
 }
 }
 });
 }
 google.setOnLoadCallback(initialize);
</script>

・スタイルシート

<style type="text/css">
<!--
h3 {
font-size: 100%;
border-bottom: 1px dotted #6666CC;
padding: 0px 2px 2px;
}
div#feed {
color: #330000;
font-size: 95%;
border: 1px solid #6666CC;
width: 350px;
padding: 0px 10px 10px;
}
ul#entry-list {
list-style-type: square;
margin: 0px 16px;
padding: 0px;
}
-->
</style>

※上記のスタイルシートで次のように表示されます。(文字色を指定をする前の画像です。)

f:id:rouge_2008:20100930085923p:image


・エントリーの記事リスト表示したい位置に次のタグを記述します。

<div id="feed">
</div>
◎質問者からの返答

大変使いやすいスクリプトの回答をありがとうございました。


ど素人なものですから、応用力がございません為、

お尋ねさせて頂きたい事がございます。


1. 同一ページ内に、複数の違うはてなダイアリーの新着エントリーを表記する場合、

回答内スクリプトのどこに手を入れて、ダイアリーの種別をすれば良いですか?

(ダイアリーA と ダイアリーB と ダイアリーC の区別)


2.記事タイトルのみの表示にするには、どのようにすれば良いですか?

(記事をアップした年月日を非表示にする)


3.回答内に表示されている『気まぐれ日記の新着エントリー』には、

各エントリー左横に■がみえていますが、

試しページに自分のダイアリーの新着を表示させてみましたら、

●が左横にみえます。■を表示させることは可能でしょうか?


ご指導、宜しくお願い申し上げます。

再回答をお待ちしております。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ