手軽にテキストシャッフル演出ができる
JavaScriptライブラリ「shuffle-text」を公開

84
110
31

JavaScriptライブラリ「shuffle-text」を公開しました。shuffle-textはテキストシャッフル(文字列がランダムで切り替わる演出)の表現を行うためのライブラリで、SPA(シングル・ページ・アプリケーション)やゲームの演出やスペシャルコンテンツなどの演出に役立ちます。

たとえば、ウェブサイトでマウスカーソルが触れたときに次のような演出ができます。

JSライブラリはMITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。

shuffle-text を使ってみよう

本記事では、JSライブラリを組み込み利用するまでの手順を解説します。以下のデモが今回作成するもののサンプルとなります。

GitHubからダウンロードして、buildフォルダー内の「shuffle-text.js」を次のようにファイルを配置します。プレーンなJavaScriptで作成しているので、ライブラリの依存関係はありません。

shuffle-text.jsの使い方は至ってシンプルで、HTML要素の中のテキストに対してエフェクトを適用するだけです。HTMLの適用したい要素に対して、document.querySelector()メソッドなどで参照をとり、ShuffleTextクラス(shuffle-text.jsの中身)のコンストラクターの引数として渡します。エフェクトを開始したいタイミングで start() メソッドを呼び出します。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8"/>
</head>
<body>
<h1 id="myText">This is a shuffle-text.js example.</h1>
<script src="shuffle-text.js"></script>
<script>
 var text = new ShuffleText(document.querySelector('#myText'));
 text.start();
</script>
</body>
</html>

これで以上です。ブラウザでエフェクトが再生されるのを確認ください。

詳しい仕様は、APIドキュメントとして公開しています。いろいろカスタマイズできるようになっているので参考ください。

こだわったポイント

たとえば、文字がシャカシャカ切り替わりながら揃うだけという設計目標だと、次のように前方から文字が出現する演出になります。これはこれでいいのですが、機械的な単調な雰囲気を感じます。

shuffle-textでは文字の出現やエフェクトの終了タイミングが不揃いになるように設計しています。乱数のコクと言いますか、あえて不完全なほうがノスタルジックな雰囲気を醸し出せます。

TIPS
乱数にコクを出す話は記事「JavaScript開発に役立つ重要なランダムの数式まとめ」や「乱数にコクを出す方法について - Togetterまとめ」が参考になります。

shuffle-textの事例を紹介

shuffle-textは私が制作に携わったいくつかのプロジェクトで利用しています。事例として紹介します。

ClockMaker Labs - Interaction Design × Web Technology

筆者の個人サイト。2008年頃から制作してきた実験的なインタラクションコンテンツを掲載しています。サイトはAngular 4で構築しており、その中でshuffle-textを利用しています。サイトのソースコードはGitHubで公開しています。

Beautifl - Flash Gallery of wonderfl

Beautiflはwonderflに投稿されたFlash作品を独自にピックアップしたギャラリーサイト。画面左側のナビゲーションにshuffle-textを利用しています。このサイトに関する技術的なことは記事「脱jQueryのためにしたこと」や「CSS Grid Layoutをガッツリ使った所感」にまとめていますので、あわせてご覧ください。

日本全国花粉飛散マップ Pollen Map in Japan | ICS

日本全国花粉飛散マップは花粉の飛散量をデータビジュアライゼーションとして表現したサイト。数値の部分にshuffle-text(CreateJS版)を利用しています。

NPMでの利用方法

shuffle-textはnpmでも公開しています。npmでモジュールを管理するフロントエンドエンジニアはこちらから利用するのがいいでしょう。

Node.jsをマシンに導入していれば、npmコマンドを使ってJSライブラリをインストールできます。コマンドライン(Windowsではコマンドプロンプト、macOSではターミナル)で、次のコマンドを入力してインストールください。

npm install shuffle-text

もしくは、npmの代わりにYarnでインストールするのもいいでしょう。Yarnについては記事「npm互換のJavaScriptパッケージマネージャーYarn入門」を参照ください。

yarn add shuffle-text

モジュールのバンドル方法

モジュールとしてバンドルすれば、1つのJavaScriptファイルとしてまとまるので、サーバーリクエストの回数が減り読み込み時間を短縮できます。モジュールバンドラーにはいろんな種類が存在しますので、それぞれ紹介します。

一般的な方法として、JavaScriptにrequire()メソッドを記載してモジュールを読み込みます。構成はサンプル(Broserify版)を参考ください。

const ShuffleText = require("shuffle-text");

// 要素を取得
const element = document.querySelector("#my-element");
// インスタンスを生成
const shuffleText = new ShuffleText(element);
// エフェクトを再生
shuffleText.start();

もしくは、モダンなES2015のimport文でモジュールを読み込むのもいいでしょう。shuffle-textはpackage.jsonファイルのjsnext:mainmoduleなどの新しい方式にも対応しています。この方法で利用する場合の構成はサンプル(Webpack2版)サンプル(Rollup版)を参考ください。

import ShuffleText from "shuffle-text";

// 要素を取得
const element = document.querySelector("#my-element");
// インスタンスを生成
const shuffleText = new ShuffleText(element);
// エフェクトを再生
shuffleText.start();

TypeScriptで利用する場合は、定義ファイルも自動的にインストールされるようになっているので、d.tsファイルを持ち込まなくても利用できます。

最後に

実はこのライブラリは2012年に公開していたものを新しくしたものです(参照「HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 | ClockMaker Blog」)。TypeScript化したことや、npmjsで公開した点など、時代の流れに即して更新してあります。ぜひ気軽に利用ください!

※この記事が公開されたのは1年11ヶ月前ですが、 平成30年3月14日に内容をメンテナンスしています。