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

Life is bitter

日常生活で考えたことやデザイン・写真・インテリアをはじめとした役に立ちそうな知識をまとめて記しています。

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

ブログ

f:id:life-is-bitter:20161011165709j:plain

どうも、JavaScript初心者です。
最近CSSはある程度書けるようになってきましたがJavaScriptに関しては魔境、という感想しか抱きません。

さて、最近というか割と前からでしたがこのブログは直帰率がめちゃくちゃ高いです。数字にして90%前後ほど。またアナリティクスによるとPCからのアクセスがやや多いので、どうにか回遊率を上げたいなと思いグローバルナビゲーションの下にカルーセルスライダーを設置して最新記事の情報(タイトルとアイキャッチ画像)をそこに流し込みたいと考えたわけです。

カルーセルスライダーとは下のようなやつですね。最近のWEBでよくみる。

f:id:life-is-bitter:20161011172614g:plain

この各スライドに最新記事の情報を入れたいわけです。

WordPressなら何やらプラグインで簡単に導入ができるようなのですが、はてなブログではそうもいかず自分でカスタマイズをしないといけないわけでありまして…。

そして、調べてみたところjQueryプラグインでslick.jsというのがきれいだし良さそうだったので一念発起して導入しようと頑張ってみました。

…結果からいうと全然動きませんでした。

かれこれ3日間ぐらいずっとコードをいじってみましたが全くカルーセルスライダーのかたちが見えてきません。 初心者なりに「こうかな?いやいやこうか?」と奮闘するも結果はむなしく…。

とりあえずどういうプロセスで実装しようとしたかを整理してみます。

どうやってカルーセルスライダーを実装しようとしたか

考えていた方法は以下の通り。

①Chiroruさんの記事とコードを参考に最新記事のタイトルと画像を取得して表示
②①で取得した情報をslick.jsにぶっこんでカルーセル表示

…と至ってシンプル。複雑だともうどこから手を付けたらいいかわからないですからね。

<!-- 新しい記事を表示する -->
<div id="new_entries_feed" align="center">Now Loading...</div>
<!-- SCRIPT : new_entries_feed -->
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize(){
//RSSフィードの取得
var blogURL = "http://www.life-is-bitter.com/";
var feed = new google.feeds.Feed( blogURL+ "rss");
//取得するフィード数
feed.setNumEntries(5);
//実際に読む込む
feed.load(function(result){
//読み込めたか判別
if (!result.error){
//表示部分を選択
var container = document.getElementById("new_entries_feed");
//変数の初期化
var useFeed = "";
//Feedの処理
for (var i = 0; i < result.feed.entries.length; i++) {
//Feedを一つ抽出
var entry = result.feed.entries[i];
//画像がない場合を考慮
var no_image = 'http://cdn.mogile.archive.st-hatena.com/v1/image/life-is-bitter/297787252686244912.jpg';
//最初の画像を抽出
var first_image = (entry.content.match(/http(?:s|):{1}[\S]+\.(?:jpg|gif|png)/) != null)
? entry.content.match(/http(?:s|):{1}[\S]+\.(?:jpg|gif|png)/)
: no_image.match(/http(?:s|):{1}[\S]+\.(?:jpg|gif|png)/);
//リストに突っ込む
useFeed += '<div>'
+ '<a href="' + entry.link + '">'
+ '<img class="htbl_new_entry_img" src="' + first_image[0] + '">'
+ '<div class="htbl_new_entry_text">'
+ '<span class="entry_title">' + entry.title + '</span>'
+ '</div>'
+ '</a>'
+ '</div>';
}
//リストを表示させる
container.innerHTML = '<div class="htbl_new_entries">' + useFeed + '</div>';
}
});
}
google.setOnLoadCallback(initialize);
</script>

こちらはChiroruさんが提供してくださっているページで生成した最新記事のタイトルと画像を取得してくるコードをちょっと改変したものです。日付表示を消したりこの後slick.jsを適用させるためにdivのクラス指定を消したりしています。

この段階では何も問題はなくて、ちゃんとフィードは取得できているんですよね。

それであとはslick.jsを導入するわけですが、公式サイトには以下のような構造になっていれば動くとのことなのです。

<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({

});
});
</script>
</body>
</html>

ここで、はてなブログでの注意点として.jsファイルは自前でサーバを用意していない限りアップロードできませんのでjsDelivrのCDNを利用します。それでコードを改めて直すとこんな感じ。

<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/g/jquery.slick@1.6.0(slick-theme.css+slick.css)">
</head>
<body>
<div class="htbl_new_entries">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.htbl_new_entries').slick({

});
});
</script>
</body>
</html>

<div class="htbl_new_entries">の中に取得したフィードたちがいて、カルーセル表示になってくれるはずなのですが全然そんな気配はなくただ縦に並ぶだけ…。最初は①のフィード取得のコードの方に問題があるのかと思って画像直パス表示させたものにslick.jsを適用してみたがこれも動かずで、問題はslick.jsの実装の方にあるらしい。

ここを見て確認もしてみたけどやはりうんともすんとも言わず。

ちょっと備忘録として雑なんだけどちゃんとjQueryのことについてもっと勉強したらわかるようになるんですかねえ。はてなブログでのjQuery使用は一癖あるとは聞いてたけど…。

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