Twitterトレンドランキングサイト「ツイータン」のサイトカラーを、これまでのピンク色からTwitterらしい青色に変更してみました。

この作業と合わせて、当日のトレンド1位となったキーワードに関するツイートを、jQueryのプラグインjquery.simpleTicker.jsを使ってニュースティッカー風に表示もさせてみました。

そこで、この記事では「ツイータン」のサイトカラーを変更した経緯と、お知らせやニュースを1件毎に左右や上下に動かして表示してくれる、jQueryのプラグインjquery.simpleTicker.jsについて、ライブラリの使い方なども合わせてご紹介したいと思います。




サイトカラーの変更

Twitter APIで取得したトレンドワードデータを使って作った、Twitterトレンドランキングサイトの「ツイータン」のデータが400万レコードを超えたと先日記事にしましたが、この「ツイータン」のサイトカラーをガラッと変更して、おまけにトレンドのtweetをニュースティッカー風にトップページに表示もしてみましたので、その流れをご紹介したいと思います。

以前のサイトカラー

以前のサイトカラーは、色見本サイトで「透き通った赤紫」との名前がついていた、HEX値でいうと#E3B3CD、RGBでいうとR227 G179 B205となる少々ピンクっぽい色を背景色にしていました。

HEX値#E3B3CDのピンクっぽいカラーを使った背景パターン
#E3B3CDにノイズテクスチャを付けた背景色

コロナ禍が始まる前の2019年~2020年の年末年始休み中にサイトを制作した際、このピンクっぽい色を選んでサイト制作してしまっていましたが、Twitterのロゴカラーの青色でもない色だったので、Twitterトレンドランキングサイトとしても少々違和感があるなとは日々感じておりました。

それと、本業中にこっそりサイト修正をするときにも、やはりこの色合いのサイトだとパッと開きづらかったこともあり、サイトカラーもよく考えてから作らないと後々苦労するなとは思ったりしていました。

Twitterのロゴカラー

さて、おなじみのTwitterのロゴカラーはHEX値でいうと#1D9BF0、RGBでいうとR29 G155 B240という青色です。この鳥とこの色を見ればすぐにTwitterだと分かりますね。

TwitterのロゴカラーのHEX値#1D9BF0
Twitterのロゴカラーは#1D9BF0

新サイトカラー

新しいサイトカラーは色見本サイトで「鮮やかな青」という名がついていた、HEX値でいうと#03A9F4、RGBでいうとR3 G169 B244となる、鮮やかな青色を背景色にしています。Twitterのロゴカラーと比べると、この色の方がシアンが強いという感じです。

HEX値#E03A9F4の鮮やかな青カラーを使った背景パターン
#03A9F4にノイズテクスチャを付けた背景色

とはいえ、このサイトカラーとTwitterロゴがあるだけで、なんとなくTwitter関連のサイトだと分かりそうなので、前よりは全然良さそうです。

トレンドツイートのニュースティッカー風表示

せっかくサイトカラーも変更したので、ついでに少々機能を増やしてみました。

サイトに何かしらツイートが表示されていないと、Twitterトレンドワードサイトらしくない気がしたので、サイトカラーの変更と合わせてサイトトップページにトレンドツイートの表示もさせることにしました。

表示させるツイートは、今日のツイッタートレンドランキングの1位にあるワードをTwitterAPIに投げて得られたツイートデータにしてあります。

TwitterAPIでのキーワード検索のやり方は、こちらの記事にまとめてあります。

取得できたトレンドツイートをそのまま表示させるのでは芸がないので、ニュースティッカー風に1ツイートごとにjQueryで表示させておきました。ニュースティッカーが何かというと、新幹線車内のドア上に付いているニュース表示版や、電光掲示板といえば分かりやすいかと思います。

jquery.simpleTicker.jsを使ったニュースティッカー風ツイート表示
jquery.simpleTicker.jsを使ったニュースティッカー風ツイート表示

jquery.simpleTicker.js

ニュースティッカー風の表示には、jQueryのニュースティッカー用プラグインの「jquery.simpleTicker」を試してみました。

Gitにプラグインがありましたが、開発者さんのブログを見ると2012年の記事だったので、今でもこのプラグインを使っている方が多いようなので、相当使いやすいんだろうと思って使ってみたら本当に超簡単にティッカー表示ができてしまいました。

開発者さんのブログ記事にもありましたが、ティッカーの動きは3パターンが用意されていて、fadeはパッと、rollは下からふわっと、slideは右から左にシュットでてくる動きのようです。

とりあえずニュースティッカーのタイプは3種類用意してみた。
・fade
・roll
・slide

http://log.miraoto.com/2012/12/708/

jquery.simpleTicker.jsの使い方

Gitでzipを落としたあとは、jQueryと共にファイルを読み込みつつ動きのパターンを指定してあげれば準備OKです。

<link rel="stylesheet" href="jquery.simpleTicker.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script src="jquery.simpleTicker.js"></script>
<script>
 $(function(){
   $.simpleTicker($('#ticker'),{'effectType':'slide'});
 });
</script>

tickerと名付けたDIVタグ内に<ul><li>でリストを書いていけば、リストが勝手にティッカー風に動いてくれます。滅茶苦茶簡単です。

<div id="ticker" class="ticker">
 <ul>
  <li>ニュース1</li>
  <li>ニュース2</li>
  <li>ニュース3</li>
 </ul>
</div>

サイトのトップページ上段では本日のトレンドワードランキングをカルーセルで横に動かしていたので、こちらのティッカーはrollで下からふわっと表示させてみました。<li>の中身にDIVタグがあってもうまくそのまま動いてくれたので、tweet内容やTwitterユーザ名や画像がイイ感じで動いてくれました。

おわりに

twitter APIは15分単位で取得回数に制限があるものの、API自体は非常に安定してデータが取得できるのでおすすめです。アクセス数が多いサイトさんだと色々考えないとダメそうですが、そうでなければstandardプランで色々遊んでみて下さい。

ABOUT dtn.jp

この運営ブログをみてdtn.jpの運営サイトに興味をお持ちになった方は下記のリンク集からサイトをご参照ください。PHP・SQL・JS・HTML・CSSや様々なAPIでゼロから立ち上げたサイトを複数運営しています。

dtn.jp関連サイト

  • ディレクトリ型検索エンジンdtn大手は全てサービスを終了してしまい、中小でも運営を継続するところがほとんど無くなったディレクトリ型検索エンジンを、2002年から細々運営しております。今も申請されたサイトは実際に管理人が訪問して確認後に登録しています。是非登録どうぞ。
  • 猫ネコサーチエンジン猫・ペットサイト専用のディレクトリ型検索エンジンです。登録サイトはサイトのスクリーンショット付きでカテゴリに掲載をいたします。
  • 画像掲示板の泉画像・YouTube・ニコニコ動画・Tiktokの貼り付けが可能な匿名画像掲示板です。27ジャンルに分かれた掲示板に、それぞれ100スレッドまで立てることが可能です。
  • ツイータンTwitter APIを使って10分おきに収集したTwitterトレンドワード・人気ハッシュタグデータを、月別に集計してランキング形式で公開しています。年間トレンドワードも公開中。
  • Keyword Tool++Yahooショッピングや楽天のトレンドワードデータを日次収集し、EC系の人気キーワードをラインキング形式でご紹介しています。各ワードの検索ボリュームや関連語、24か月の検索ボリュームをグラフで確認が可能です。
  • 消費者金融の泉カードローン商品を取り扱う金融業者を一覧で比較可能としたサイトです。カテゴリ別、人気度別、限度額別、金利別に比較可能です。
  • TrendinGファッションブランドを人気アイテムヒット率でランキング化し、一覧でご紹介しているサイトです。

各サイトの開発方法などについて

各サイトの開発方法や運用トラブルについては、当ブログで不定期にご紹介しています。Twitterで新着記事のお知らせもしています。宜しければフォロー下さい。