もちっとメモ

もちっとメモ

もぐりのエンジニアが日々の中で試してみたことを気が向いたときに書き連ねていきます

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

2019/5/30 追記

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

t-n-clark.hatenadiary.jp

2019/5/20 追記

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

はじめに


以前,

t-n-clark.hatenadiary.jp

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

website-fun.com

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

appredmi.hateblo.jp

PHPWordPressが使えるなら苦労しないのかもしれませんが,いかんせん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>

さきほどまで

data-url=""

だった部分が

data-yql=""

に変わっています. 表示件数の指定はこの後の

feed (0, 3)

で指定しています.例えば,上のコードでは最新3件を表示させます.
実際にこれを使って書き直したホームページがこちら.

clarkphys.html.xdomain.jp

f:id:T-N-Clark:20170302180302p:plain

これでようやく原状復帰できました.半日かかった.
を変更すれば基本的には任意のURLで使用可能なはず.
もし参考になれば幸いです.


feed (0,3)とかの使い方参考サイト.

qiita.com

次回

t-n-clark.hatenadiary.jp