はてなダイアリーの記事のリンクをHPに掲載したいと考えています。 

はてなダイアリーから出力されるRSSをHTMLに変換するプログラムを作ってください。

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

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

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


宜しくお願い致します。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2010/09/28 05:16:44
  • 終了:2010/10/02 15:26:38

ベストアンサー

id:rouge_2008 No.2

rouge_2008回答回数593ベストアンサー獲得回数3502010/09/30 09:04:13

ポイント450pt

次のページで紹介されていた「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>
id:SumireS

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


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

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


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

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

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


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

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


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

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

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

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


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

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

  

2010/09/30 15:17:04

その他の回答(1件)

id:Galapagos No.1

Galapagos回答回数963ベストアンサー獲得回数892010/09/28 15:06:53

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

id:SumireS

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

2010/09/29 18:15:47
id:rouge_2008 No.2

rouge_2008回答回数593ベストアンサー獲得回数3502010/09/30 09:04:13ここでベストアンサー

ポイント450pt

次のページで紹介されていた「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>
id:SumireS

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


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

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


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

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

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


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

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


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

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

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

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


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

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

  

2010/09/30 15:17:04
  • id:rouge_2008
    1. 同一ページ内に、複数の違うはてなダイアリーの新着エントリーを表記する場合

    1-1.次の部分を一つ分として丸ごとコピーして、下にもう一つ分を貼り付けてください。

    function initialize() {
    (~略~)
    google.setOnLoadCallback(initialize);


    ※「function initialize()」と「google.setOnLoadCallback(initialize)」の「initialize」が対応していますので、適当に2つとも同じ名前に変更します。(「initialize2」でも「diary2」でも何でも大丈夫です。)

    1-2.「var container = document.getElementById("feed");」の「feed」を「feed2」など適当に変更します。
    ※ここで指定したidの要素内に記事のリストが生成されます。

    1-3.「wrap.setAttribute("class","entry-list");」の「id」を「class」に変更します。
    ※「id」は一つの要素にしか指定してはいけない事になっているので、「class」に変更する必要があります。
    ※コピー元と複製の両方を変更します。

    1-4.表示したい位置に次のHTMLタグを追加します。

    <div id="feed2">
    </div>

    ※「1-2」で指定したid名にします。

    1-5.文字色、ボックスの枠表示、幅など一つ目と同じでいい場合は、次のようにして<div id="feed2">の要素にも<div id="feed">の要素と同じスタイルシートが適用されるようにします。

    div#feed {
    (~略~)
    }

    上記を次のように変更します。

    div#feed, div#feed2 {
    (~略~)
    }

    1-6.<ul id="entry-list">ではなく、<ul class="entry-list">が生成されるように変更したので、次のように変更します。

    ul#entry-list {
    (~略~)
    }

    上記を次のように変更します。

    ul.entry-list {
    (~略~)
    }


    2.記事タイトルのみの表示にする(記事をアップした年月日を非表示にする)

    item.innerHTML = "<a href='" + entry.link + "' target='_blank'>" + ttxt2 + "</a>" + "<br>" + postdate;

    上記の記述を次のように変更します。

    item.innerHTML = "<a href='" + entry.link + "' target='_blank'>" + ttxt2 + "</a>";

    ※日付の処理が必要ないようですから、次の記述は削除して大丈夫です。(先ほど変更した記述の直前にあります。)

    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] + ")";



    3.各エントリー左横に●ではなく■を表示させる

    ul#entry-list {
    list-style-type: square;
    (~略~)
    }

    上記のCSSを適用させたでしょうか?
    「list-style-type: square;」で■を表示させる事が出来ます。
    「list-style-image:url(画像へのパス);」を指定して、好きな画像を表示させる事も出来ます。
    http://www.tagindex.com/stylesheet/list/list_style_image.html
    http://www.dspt.net/stylesheet_css/007/002.html
  • id:SumireS
    ===============
    rouge_2008 様
    ===============
    コメント欄への追加回答、誠にありがとうございます。
    悪戦苦闘の末、何とか
    同一ページ内に複数のはてなダイアリーの新着記事タイトルを表示させることができました。


    で、重ね重ね申し訳ございませんが、お尋ね致したい事柄がございます。

    1. 回答欄に書いて頂きましたスクリプト内 文字行8段目 
       feed.setNumEntries(7);
       は、表示させる記事題名の数 と推測致しますが、(間違っていたならすみません)
       実際に表示された数は、7つではなく5つなのですが 
       これはこれで変えられないのでしょうか?


    2. コメント欄 1-5.文字色、ボックスの枠表示、幅など 
    についてですが、
      表示させるダイアリーごとに、異なる要素にしたい場合は どのようにすれば良いですか?


    3. ダイアリー名称を非表示にするには どのようにすれば良いですか?


    4. コメント欄 3.各エントリー左横に●ではなく■を表示させる
    についてですが、

      UL#entry-list {
     list-style-type: square;

      もしくは、

      UL.entry-list {
     list-style-type: square;

      であっても、●表示になっております。
      この部分は、とりあえず現状の●のまま使います。
      後日、コメント欄に書いて下さった画像表示にチャレンジしてみます。



    以上、お手すきの折に、宜しくお願い申し上げます。
    ==============================================================================
  • id:rouge_2008
    1. 回答欄に書いて頂きましたスクリプト内 文字行8段目 
       feed.setNumEntries(7);
       は、表示させる記事題名の数

    RSSで出力されていなければ表示させる事はできません。
    はてなダイアリーの場合、5日分の記事のRSSが出力されますが、この日数を変更する事は、現在の所できないようです。
    同じ日に2つ以上の記事を書いた日があれば、6つ以上の記事が取得できます。



    2. コメント欄 1-5.文字色、ボックスの枠表示、幅など 
    についてですが、
      表示させるダイアリーごとに、異なる要素にしたい場合


    それぞれ、<div id="feed">、<div id="feed2">、<div id="feed3">に記事リストを表示させる事にした場合、次のようにそれぞれ指定する事で、別々のスタイルで表示されます。

    div#feed {
    <div id="feed">に適用させるCSSをここに指定
    }
    div#feed2 {
    <div id="feed2">に適用させるCSSをここに指定
    }
    div#feed3 {
    <div id="feed3">に適用させるCSSをここに指定
    }



    3. ダイアリー名称を非表示にする


    次の部分を削除します。

    var title = result.feed.title;
    var h3 = document.createElement("h3");
    h3.innerHTML = title+"の新着エントリー";
    container.appendChild(h3);



    4. コメント欄 3.各エントリー左横に●ではなく■を表示させる

    IE7以下を使用していたでしょうか?
    IE7以下の場合、CSSセレクタをクラス名で指定した場合に、リストに関するスタイルがなぜか上手く適用されないようです。
    (条件によって異なるらしく、まだ原因が良く分かっていませんが、今回のJavascriptが影響しているのかもしれません。)
    次のようにして、特定のid名「feed」の下の「ul」要素に適用させてください。(※こうすれば、他のリスト表示に影響を与えず、記事のリストだけに適用させる事ができます。)

    #feed ul, #feed2 ul {
    list-style-type: square;
    }

    ※「list-style-image」の場合も上記と同じように指定します。

  • id:SumireS


    ===============
    rouge_2008 様
    ===============
    ご丁寧なご指導、誠にありがとうございます。


    1.表示させる記事題名の数
      ご説明よくわかりました。


    2. 表示させるダイアリーごとに、異なる要素にしたい場合
       自分の不手際と思いますが上手く別々の要素を表示できませんでした。
       どのような点で、つまづいているのか 何回もながめてみましたが 
       つきとめることができませんでした。


    3. ダイアリー名称を非表示にする
       成功しました。


    4. コメント欄 3.各エントリー左横に●ではなく■を表示させる
       IEは8.0.6版、Safariは5.0.2版、
    GoogleChromeは6.0.472.63版、Firefoxは、3.6.2版
    で、表示してみましたがいずれも●の表示になってしまっております。
       しかし、これはこのままでも問題ありませんのでOKです。



    このたびは、大変お世話になりました。
    心よりのお礼と感謝を申し上げます。
    ありがとうございました。
    ==============================================================================
  • id:rouge_2008
    本当にたくさんのポイントといるかをありがとうございます。


    再度確認してみましたが、やはり描画で不都合が生じるのはIE7以下とIE8互換表示モードのみで、他のブラウザ(Firefox 3.5.13および3.6.10、Safari 5.0.1および5.0.2、Google Chrome 6.0.472.63)では、問題なく指定したスタイルで表示されました。
    「ul.entry-list」の替わりに「#feed ul, #feed2 ul」とした場合は、IEでも問題なく表示されます。
    ※複数設置する時にjavascriptの記述を「wrap.setAttribute("id","entry-list")」から「wrap.setAttribute("class","entry-list")」に変更しているはずですが、この部分に間違いはないでしょうか?

    良かったら以下のCSSを試してみてください。
    ※記事リスト表示用ボックスとして、<div id="feed">と<div id="feed2">を用意して表示させている場合の記述です。
    ※表示させるダイアリーごとに、異なるスタイルを指定する時の参考になるように簡単にコメントを入れています。


    <style type="text/css">
    <!--
    /* ul要素の初期化(余分な余白をリセットします。) */
    ul {
    margin: 0px;
    padding: 0px;
    }
    /* <div id="feed">内の要素に適用するCSS */
    div#feed {
    color: #6633FF; /* 文字色 */
    font-size: 95%; /* フォントの大きさ */
    font-family: "メイリオ", "MS ゴシック", sans-serif; /* フォント指定 */
    border: 1px solid #6666CC; /* 枠線の太さ、タイプ、色 */
    line-height: 1.2em; /* 1行の高さ */
    width: 260px; /* ボックスの幅 */
    margin-bottom: 5px; /* ボックス外側の余白(下) */
    padding: 10px; /* ボックス内側の余白(上下左右) */
    }
    /* <div id="feed">内のリンク要素(未訪問)に適用するCSS */
    div#feed a:link {
    color: #663399;
    }
    /* <div id="feed">内のリンク要素(訪問済み)に適用するCSS */
    div#feed a:visited {
    color: #6666CC;
    }
    /* <div id="feed">内のリンク要素(マウスオーバー時)に適用するCSS */
    div#feed a:hover {
    color: #9966CC;
    }
    /* <div id="feed">内のリンク要素(クリック時)に適用するCSS */
    div#feed a:active {
    color: #6633FF;
    }
    /* <div id="feed2">内の要素に適用するCSS※各項目はdiv#feedの説明と同じ */
    div#feed2 {
    color: #CC3366;
    font-size: 95%;
    font-family: "メイリオ", "MS ゴシック", sans-serif;
    border: 1px solid #CC9999;
    line-height: 1.2em;
    width: 220px;
    padding: 10px;
    }
    div#feed2 a:link {
    color: #990033;
    }
    div#feed2 a:visited {
    color: #CC6666;
    }
    div#feed2 a:hover {
    color: #CC9999;
    }
    div#feed2 a:active {
    color: #CC3366;
    }
    /* <div id="feed">内ul要素と<div id="feed2">内ul要素に適用するCSS */
    #feed ul, #feed2 ul {
    list-style-type: square;
    margin-left: 14px;
    }
    -->
    </style>



    他のブラウザでも問題が発生しているという事ですので、これで大丈夫かどうか分かりませんが・・・
    ※値の指定方法が分からない場合は、「color」や「font-family」など、知りたいプロパティ名で調べてみてください。
    http://www.tohoho-web.com/css/
    http://www.htmq.com/style/index.shtml
    http://www.tagindex.com/stylesheet/properties/index.html


    あるいは、インラインスタイルシートとして、Javascriptからスタイルシートを適用させた場合、IEでも大丈夫でした。


    wrap.setAttribute("class","entry-list");
    // ここに次の2行を追加してみてください。
    wrap.style.listStyleType = "square";
    wrap.style.marginLeft = "14px";


    ※こちらを試す場合は、次のCSSは削除しても大丈夫です。

    /* <div id="feed">内ul要素と<div id="feed2">内ul要素に適用するCSS */
    #feed ul, #feed2 ul {
    list-style-type: square;
    margin-left: 14px;
    }


    先に前者の方法を試してみて、上手くいかなかったら後者の方法を試してみてください。
  • id:SumireS



    ===============
    rouge_2008 様
    ===============
    ご丁寧なご指導、誠にありがとうございます。

    「wrap.setAttribute("class","entry-list")」の変更はきっちりできておりましたが、
    なぜか●の表示でした。

    時間がかかりましたが、なんとか ●を■への表示変更に成功致しました。
                  ↓ その部分の画像キャプチャー
    http://img.f.hatena.ne.jp/images/fotolife/S/SumireS/20101005/20101005202700.jpg



    他の懸案事項につきましては、少しずつ作業していきます。
    又、何かありましたら 何卒宜しくお願い申し上げます。

    <(_ _)><(_ _)><(_ _)><(_ _)><(_ _)><(_ _)><(_ _)><(_ _)>

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません