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で構築しており、その中で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ファイルとしてまとまるので、サーバーリクエストの回数が減り読み込み時間を短縮できます。
一般的な方法として、ESモジュールのimport文でモジュールを読み込みます。モジュールバンドラーにはいろんな種類が存在しますので、下記の構成を参考ください。
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で公開した点など、時代の流れに即して更新してあります。ぜひ気軽に利用ください！
※この記事が公開されたのは5年前ですが、1年前の2021年10月に内容をメンテナンスしています。