ホームページにブログ等を埋め込みたい～その2～

2019/5/30 追記

React限定ですが、代替案を考えてみました!!

t-n-clark.hatenadiary.jp

2019/5/20 追記

いつの間にか本記事の方法である爆速YQLも使えなくなっていました。現在代替案を模索中です。

On Jan. 3, 2019, YQL service at https://t.co/g4W9RhdMLk will be retired. YQL based services that use https://t.co/g4W9RhdMLk, including users of https://t.co/5IkUaEykdl, will no longer operate. Yahoo Weather API users see the tweet below for info about continuing your service.
— Y! Developer Network (@ydn) 2018年12月31日

はじめに

以前，

t-n-clark.hatenadiary.jp

でホームページにブログの更新情報を表示させる方法を紹介しました．
私のホームページでもこの方法を採っていたのですが，最近表示されていことが度々あって調子悪いのかな，そのうち元に戻るのかなと思っていました．
しかし，調べてみると，なんとGoogle Feed APIが使えなくなっていた．

website-fun.com

zrssfeedもGoogle Feed APIをしているみたいなのでダメ．

appredmi.hateblo.jp

PHPやWordPressが使えるなら苦労しないのかもしれませんが，いかんせんHTML縛りの私にとってはこれは使いたくても使えない．
そんな矢先に見つけたのが，
「Yahoo! Japan の爆速YQL」
というサービス．特徴としては，
・無料(登録も不要)
・サーバーサイドのプログラムが不要
・ちょっと昔のブラウザでも動作する
の3拍子そろったサービスのようです．
外部サイトのRSSも表示可能．(クロスリファレンスというのでしょうか?)
使い方も簡単で，基本はこちらのサイトを参考にさせていただきました．

techblog.yahoo.co.jp

こちらを参考にして作ったソースがこちら．


            <script src="https://i.yimg.jp/images/yjdn/js/bakusoku-yql-v1-min.js"
                data-url="http://t-n-clark.hatenadiary.jp/feed">
                <ul>
                    {{#query.results.entry}}
                    <li>
                        {{published}}<br>
                        <a href="{{link.0.href}}" target="_blank">{{title}}</a>
                    </li>
                    {{/query.results.entry}}
                </ul>
            </script>

これをHTMLの表示させたい位置に書きます．基本的にはbodyに書くと思います．
ちょっとだけ解説をすると

data-url="http://t-n-clark.hatenadiary.jp/feed"

の中身をいじれば別のURLも使えます．ちなみに上記のURLはこのブログの更新情報です．

{{published}}

の部分が日付の表示です．

target="_blank"

は新しいタブで表示させるためのコードのなので，不要なら削っても大丈夫です．

このままでは，日付が日本語表示にならないので，そこの部分を編集します．
以下のサイトを参考にしました．

www.gesource.jp

実際に作った日付表示変更後のソースコードがこちら．


            <script>
                function filterRSS(data) {
                    for (var i = 0; i < data.query.results.entry.length; ++i) {
                        var date = new Date(data.query.results.entry[i].published);
                        data.query.results.entry[i].published = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
                    }
                    return data;
                }
            </script>
            <script src="https://i.yimg.jp/images/yjdn/js/bakusoku-yql-v1-min.js"
                data-url="http://t-n-clark.hatenadiary.jp/feed"
                data-filter="filterRSS">
                <ul>
                    {{#query.results.entry}}
                    <li>
                        {{published}}<br>
                        <a href="{{link.0.href}}" target="_blank">{{title}}</a>
                    </li>
                    {{/query.results.entry}}
                </ul>
            </script>

新しく表示形式変更の関数を作って，先ほどのソースに

data-filter="filterRSS"

が追加されています．ここで，関数を呼び出しています．

基本的にこれでOKなのですが，これだと記事がすべて表示されてしまう．表示件数の指定を指定したいということでさらに変更．


            <script>
                function filterRSS(data) {
                    for (var i = 0; i < data.query.results.entry.length; ++i) {
                        var date = new Date(data.query.results.entry[i].published);
                        data.query.results.entry[i].published = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
                    }
                    return data;
                }
            </script>
            <script src="https://i.yimg.jp/images/yjdn/js/bakusoku-yql-v1-min.js"
                data-yql="select * from feed (0, 3) where url='http://t-n-clark.hatenadiary.jp/feed'" data-filter="filterRSS">
                <ul>
                    {{#query.results.entry}}
                    <li>
                        {{published}}<br>
                        <a href="{{link.0.href}}" target="_blank">{{title}}</a>
                    </li>
                    {{/query.results.entry}}
                </ul>
            </script>

さきほどまで