もちっとメモ

読者です 読者をやめる 読者になる 読者になる

もちっとメモ

管理人のホームページで書ききれていない調べ物のメモページです

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

HTML 導入してみた ホームページ システムトラブル

以前,

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