スマホでティッカーを実装してみよう

こんにちは、アメーバ事業本部コミュニティ部門の加藤（@ktknest）です。
フロントエンドディベロッパーとして、GIRL'S TALKの開発・運用を担当しています。

GIRL'S TALKは女性だけの完全匿名掲示板サービスで、テキストを主とした構成になっています。それ故、グラフィカルな要素が少ないこともあり、運営側からのお知らせの表示に賑やかしの効果も持たせて、電光掲示板風のティッカーを採用しています。

そこで今回は、陰ながら活躍してくれている、このティッカーを表現するにあたっての、注意点や実装方法をご紹介したいと思います。

実装方法の検討

まず、幾つかの方法から、オススメできない方法に触れておきます。

<marquee>タグを使う

その昔、Internet Explorerが独自実装したタグで、古いWebやガラケー等で使われていましたが、W3Cでも非推奨とされており使うべきではありません。ちなみに動作もカクカクです。。

JavaScript(jQuery)を使う

Webで検索してみると、jQueryのプラグインとしてシンプルなものから凝った演出のものまで数多く公開されています。
PCサイトで使う分には問題ないのですが、非力なスマホでは重く、実利用には厳しいことが多々です。（これはjQueryでのanimationの実装方法によるものなので、全てのケースがNGとは言えません）

ですので、残るはCSS3の活用です。

【方法１】CSS3 marquee を使う

CSS3ではCSS Marquee Level 3にて、<marquee>タグと似た要素が考えられています。
下記のようなコードで利用することができ、現在ChromeやSafariで先行実装されています。

■ CSS

.ticker {
  background-color: #333;
  color: #fcac1a;
  white-space: nowrap;
  overflow: hidden;

  overflow-x:-webkit-marquee;
  -webkit-marquee-direction: backwards;
  -webkit-marquee-style: scroll;
  -webkit-marquee-speed: 10;
  -webkit-marquee-increment: 1px;
  -webkit-marquee-repetition: infinite;

  overflow-x: marquee-line;
  marquee-direction: forward;
  marquee-style: scroll;
  marquee-speed: fast;
  marquee-play-count: infinite;
}

■ HTML

<div class="ticker">
    <p>Ticker test / use "overflow-x: marquee-line"</p>
</div>

サンプル：http://jsfiddle.net/ktknest/LrvsQ/

ただ、現時点では正式勧告されておらず、将来的にはなくなる可能性があります。
さらにこちらのドキュメントによれば、どうやら廃止の流れにあるようで、使用は避けておいた方がいいでしょう。

【方法２】CSS3アニメーションを使う

最後に挙げられるのが、CSS3アニメーションによる実装です。
先ほどの方法よりも、やや冗長にはなりますが、パフォーマンスや現状を考慮するとこれがベストだと思います。
こちらは下記のようなコードで実装できますので、ご覧ください。

■ CSS

.ticker {
  background-color: #333;
  color: #fcac1a;
  overflow: hidden;
}

.ticker p {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  -webkit-animation-name: ticker-animation;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 10s;
}

@-webkit-keyframes ticker-animation {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
/* webkitのみで省略 */

■ HTML

<div class="ticker">
    <p>Ticker test / use "keyframes + transform"</p>
</div>

サンプル：http://jsfiddle.net/ktknest/sa9K9/

詳しい説明は割愛しますが、display, white-space, padding-left の指定で領域の幅や開始位置などを調整し、translate(0%)→translate(-100%)をkeyframesでループさせてます。
流れる速度は文字数によって変わってしまうため、文字数に応じてanimation-durationを調節すればOKです。

さらにスムーズに動かすためには？

CSS3アニメーションは処理が重いため、古い端末ではスムーズには動かせないケースが出てしまいます。その場合、一部端末では3D処理用のGPUアクセラレーションを効かせることで改善する方法があります。

可能な場合は、

 -webkit-transform-style: preserve-3d;

または、

 -webkit-backface-visibility: hidden;

等を追加することで、3D処理をするよという指定がされて、GPUアクセラレーションが有効になります。
しかし、他の要素に思わぬ影響を与えるなどバグの宝庫でもあるので、使用にはご注意を。

以上、いかがでしたでしょうか。
なかなか使う機会は少ないと思いますが、参考になれば何よりです。

最後まで読んでいただき、ありがとうございました。

スマホでティッカーを実装してみよう

実装方法の検討

【方法１】CSS3 marquee を使う

【方法２】CSS3アニメーション を使う

【方法２】CSS3アニメーションを使う