つばさのーと

つばさの日常を綴るのーと

Re:はてなブログでslick.jsは使えるのか?というかjQueryプラグインは使えるのか?

f:id:tsubasa123:20170628163700j:plain

 

こんにちは、つばさ(@tsubasa123)です。

 

今日はのんびりカスタマイズに勤しもうかと思っていたのですが、ちょっと興味深い記事を見つけたので私も挑戦してみます。結論から言うと成功しましたので、誰かのお役に立てれば幸いです。

 

元ネタはこちら

 

www.life-is-bitter.com

 

デザイナーさんなのかな?最近ブログのデザインをリニューアルされたみたいでして、ロゴがめっちゃかわいいんです。タイポグラフィにもお詳しいらしく、フォント関連の記事は大変参考になりますので、WEBデザインに興味のある方は覗いてみるとよろしいかと。

 

元ネタの記事はもう半年以上前なのでとっくに解決されているかもしれませんが、

 

詳しいWEB屋さん助けてくれ〜という気持ちです。はあ。

 

って書かれていたのでちょっと遊んでみようかなというところです。

 

slickとは?

 

kenwheeler.github.io

 

公式を見てください。

 

ざっくり言うと、スライダー表示を簡単に実装するためのjQueryプラグインです。ここ最近、こどみすさんの影響からかはてなブログ界隈ではbxSliderというプラグインを利用したスライダー表示が流行っていますが、個人的にはslickの方が好きですね。

 

カルーセル表示とレスポンシブ表示にデフォルトで対応してくれていますので自分で設定を切り替えるようなコードを書かなくてもよいところがポイント高しです。その他、できることはそこまで差がないと思いますが、カスタムイベントによるフックはslickのほうがやりやすい印象。JS結構得意だぜ、って方にも向いているんじゃないでしょうか。

 

敗因は非同期処理かな?

 

元記事ではGoogleFeedAPIを使っているようでして、詳しいことは調べてないんですが非同期処理が問題じゃないのかな。Ajaxという技術を利用してXMLのデータを取得している間(戻ってくる前)に、スライダーの初期化処理が実行されちゃっているのがあやしいところ。

 

細かい説明は割愛しますが、まぁ非同期処理ってめんどくさいですよね。

 

とりあえず動くようにしてみました。

 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/g/jquery.slick@1.6.0(slick-theme.css+slick.css)">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script>

(function($) {
$(function() {
const url = 'http://www.tsubasa-note.blog/rss';
const data = [];
let c = 0;

const initSlick = function() {
    const container = document.getElementById("new_entries_feed");
    let useFeed = "";
    for (let i = 0; i < data.length; i++) {
        useFeed += '<div>'
        + '<a href="' + data[i].link + '">'
        + '<img class="htbl_new_entry_img" src="' + data[i].thumbnail + '" width="300">'
        + '<div class="htbl_new_entry_text">'
        + '<span class="entry_title">' + data[i].title + '</span>'
        + '</div>'
        + '</a>'
        + '</div>';
    }
    container.innerHTML = '<div class="htbl_new_entries">' + useFeed + '</div>';
    $('.htbl_new_entries').slick();
};

$.ajax({
    url: url,
}).done(function(xml) {
    $(xml).find('item').each(function() {
        if (c > 4) return false;
        const $this = $(this);
        data.push({
            title: $this.find('title').text(),
            link: $this.find('link').text(),
            thumbnail: $this.find('enclosure').attr('url'),
        });
        c++;
    });
    initSlick();
});

});
})(jQuery);
</script>

 

一部、元記事のコードをお借りしていますが、多分このようにコードを修正すれば動くはず。

ね。

 

できたけど

 

CDNのCSSがどうもちゃんと動いてないっぽい(フォントがないのかな?)のでデザインの調整が必要になったり、document.readyを使わないとプラグインメソッドがリファレンスエラーになったりと、はてなブログに導入するうえでいくつか困ったことがありました。コア機能の細かいところでエラーが発生しているのも気になるところです。

 

今回利用したCDNだけなのかわかりませんが、もしはてなブログでslickを利用してスライダーを実装したいという方はちょっと注意が必要です。はてなブログで画像以外のファイルがアップロードできるようになってくれると助かるんですけどね。はてな運営さん、どうかひとつよろしくお願いします。

 

さいごに

 

こんな感じで、問題はありましたがはてなブログでもslickスライダーを動かすことができました。スライダー表示に個性を求めている方、ソースコードをインラインで記述して頑張れば運用は可能だと思いますので、こちらの導入も検討してみてはいかがでしょうか。(そんな人いないかな…)

 

ではでは、最後までお付き合いいただきありがとうございました。