qve.cc と qve.jp のドメインを分離しました。
理由はいたって明白、やはり「テストサイトが必要になった」からです。
そこで、qve.cc と qve.jp のトップページに、ドメインを分離した旨のHTMLを設置したわけなんですが、お引っ越しメッセージのような味気なさが気になって…。qve.jp の RSSを表示できないものかと調べてみたところ
tokyoportfieldsさんのサイトで紹介されていた「JavaScript: 外部RSS読み込み, Load external RSS Feeds by JavaScript, “Google Ajax Feeds API”」に挑戦してみました。
Start using the Google AJAX Feed APIにアクセスし、ログインします。私は基本的にログインしっぱなしのことが多いので、いきなり同意画面が表示されました。もし、アカウントがなければ作成してください。
feed を get するURIを入力し[Generate API Key]をクリックします。
すると、基本的なソースが表示されますので、検証用にコピーしてHTMLファイルで保存しました。
Javascriptはある程度理解はしているつもりですが、詳細になると少々怪しくて…。
trial and error で設置してみました。
デフォルトはリスト形式で書き出されていたのを、通常の段落にしました。
あわせて、スニペットも表示させたかったんで、「entry.contentSnippet」も追加。
少々おかしい部分があるかもしれませんが、公開しておきます。
間違いや非合理的な部分の指摘がございましたらお願いします。
「feed.js」外部JSの内容
google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("https://qve.jp/feed/"); feed.setNumEntries(5) feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("p"); var a = document.createElement("a"); var br = document.createElement("br"); var pp = document.createElement("p"); a.href = entry.link; var list = "?" + entry.title; var list2 = entry.contentSnippet ; a.appendChild(document.createTextNode(list)); div.appendChild(a); div.appendChild(br); container.appendChild(div); div.appendChild(document.createTextNode(list2)); div.appendChild(pp); } } }); } google.setOnLoadCallback(initialize);
headタグの中に記述します。
<script type="text/javascript" src="http://www.google.com/jsapi?key=【ここに取得したAPIキーを入れます】"></script> <script type="text/javascript" src="feed.js"></script>
body中の表示させたい部分に記述します。
<div id="feed"></div>
これで、通常のHTML中にもRSSが表示できるようになりました。