memo ： 5月半ばまで停滞してます/ 予定：photoset云々、ページ作成

Aug 29th, 2011

ニュースティッカーjQuery 『Dynamic News』

を、少し前まで新着記事リストを置く場所が無いというわけで設置して、
代わりにこのニュースティッカーへRSSを読み込ませて表示してました。

そのjQueryプラグイン＜Dynamic News＞をRSSティッカーとして使う場合の設置方法と設定をメモ。


これの何が便利かというとこんな風にマウスオーバーで内容を表示できるところ。

    

コントロールバーが同時にヒョイと出て一時停止や進んだり戻ったりもできます。


【目次】

  1. 設置の前の準備
  2. ティッカーの設置と表示位置・デザイン調整
  3. パラメータの設定




1．設置の前の準備

配布サイトさんからプラグインの入ったファイルをDLし、解凍したら同梱されているCSSファイルその他諸々をアップロード。
Google feed APIを利用してRSSを取得する仕様になっているので、あわせてGoogle API keyを作っておきます。



サイトのURLを入力し、「Generate API Key」から進んだページにダーッと長い英数字が表示されたら作成完了。

    





2．ティッカーの設置と表示位置・デザイン調整

2-1. プラグインの設置

1.) <head>内にAPIキーとjQuery本体、プラグイン＆CSSファイルを読み込ませます。

<link rel="stylesheet" type="text/css" href="dnews.css" />
<script type="text/javascript" src="https://www.google.com/jsapi?key=●●●"></script>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="dnews.js" type="text/javascript"></script>



2.) 更に以下のスクリプトを記述。
「feedurl:’http://example.tumblr.com/rss’」を表示したいRSSのパスに置き換えてください。

<script type="text/javascript">
    google.load("feeds", "1");
     $(document).ready(function() {
     $('#dnews').dnews({ feedurl:'http://example.tumblr.com/rss', showdetail: true, controlsalwaysvisible: false });
     });
 </script>



3.) <body>内へ移動して、ティッカーを表示させたい箇所へ以下のようにソースを記述したらとりあえず出来上がり。

<div id="dnews" class="news-wrapper">
     <div class="news">
     </div>
</div>


RSSでなく直接自分で用意したドキュメントを流すこともできます。
その辺の詳細は配布サイトさんの解説をどうぞ。




2-2. CSSで表示位置を調整

一応これで形になりますが、ある程度CSSで表示位置などの調整が必要です。
デモページのソースを見るのが一番参考になるかなと。
自分がそれに倣って設置してたときは、中央寄せを兼ねて以下のようなソースを記述してました。

【CSS】

#newsbox {
    width: 600px;
    margin-top: 0px;
    margin-left : auto;
    margin-right : auto;
    margin-bottom: 35px;
}
.mainnews {
    position: relative;
    margin-left : 40px;
    margin-right : auto;
}

【HTML】

<div id="newsbox">
    <div class="mainnews">
        <div id="dnews" class="news-wrapper">
            <div class="news"></div>
        </div>
    </div>
</div>


※置き場所によるんですが、大体ページ最上部から最低100pxくらい離れてないと
デフォルトサイズのポップアップが見切れます。

また「dnews.css」という専用の外部CSSが用意されてるので、そっちでティッカーの幅や背景色などデザインを調整。
デフォルトでは本体部分が.news-wrapper{ }内で幅660pxに、
ニュースの流れる部分が.news{ }で幅640pxに指定されてます。
ちょっと大きかったのでそれぞれ幅520px、500pxに変更。


loadingのgifアニメも添付されてますが、それはこちら↓で作ったものに差し替えました。
種類が豊富で嬉しいサービス。





3．パラメータの設定

dnews.jsを開いて5行目から。
配布サイトさんにも詳細がありますが、主に変更する機会がありそうだなーと思う箇所と、実際変更した部分を抜き出し。

  • switchInterval ： 次の記事へスライドするまでの時間。デフォルトは5000(5秒)。
  • showdetail ： 値にtrueかfalseでマウスオーバーで記事内容をポップアップ表示するかどうかの設定。
    デフォルトはtrue。
  • controlsalwaysvisible ： true(デフォルト)でティッカーの下にコントロールバーを常に表示。
    マウスオーバー時だけにしたいときはfalseで。
  • entries ： ティッカーに流す記事数。TumblrのRSSの場合はmax20です。




【おまけ】

あと記事の流れる方向に回転寿司的な違和感を感じて逆にしてました。
14行目「var direction = “forward”;」を「var direction = “backward”;」に変更すると
一応右から左に流れるようになります。


ただそうすると通常

     ニュース１ ⇒ ニュース2 ⇒ ニュース3 ⇒ ニュース4… ⇒ ニュース1に戻る

と流れるものが

     ニュース1 ⇒ …ニュース4 ⇒ ニュース3 ⇒ ニュース2 ⇒ ニュース1に戻る

となるんですけども、そこはすぐ視界に入る新しい記事でなく、
下の方にある古い記事を表示してくれてるんだと思えばまあいいか・・という感じで。



『Dynamic News』は情報凝縮型のニュースティッカーでしたが、
もっとシンプルなニュースティッカーがいいな～という場合は
Archさんのこちらの記事で分かりやすく纏められてますので、参考にしてみてください。



« Prev    Next »
Page 1 of 1

Back to Top