サイトカラーの変更

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やニコニコ動画が貼り付け可能な匿名画像掲示板です。27ジャンルに分かれた掲示板に、それぞれ100スレッドまで立てることが可能です。
  • ツイータンTwitter APIを使って10分おきに収集したTwitter(ツイッター)のトレンドワードや人気ハッシュタグデータを月別に集計してランキング形式で公開しています。
  • Keyword Tool++Yahoo APIや楽天サイトのデータを日次で収集したデータを元に、EC系キーワードをラインキング形式でご紹介しています。各ワードは検索ボリュームや関連語、24か月の検索ボリュームトレンドを確認も可能です。
  • 消費者金融の泉カードローン商品を取り扱う金融業者を一覧で比較可能としたサイトです。カテゴリ別、人気度別、限度額別、金利別に比較可能なサイトにしています。
  • TrendinGファッションモールに出店するブランドをアイテムヒット率でランキングとしたサイトです。まだβ版です。

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

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