スタイルシート 四字熟語ジェネレータ の説明
戻る


JavaScript を使わず，スタイルシートだけで四字熟語ジェネレータを作ってみます．

仕組みについて説明します．


表示する文字のランダム化

JavaScript 版の四字熟語ジェネレータでは，表示する文字を（重みを付けて）ランダムに選びますが，スタイルシートではそういうことは無理だと思いますので，表示する文字は文字列として用意しておき，その文字列の表示位置をずらすことで，文字が順番に表示されるようにしています．そのため，文字が表示される順序はいつも同じになります．

文字列のどこから表示を開始するかはランダムに決めています．そのために，アニメーションの機能を使います．
文字の位置を表すカスタム プロパティを定義しておいて，その値が変化するアニメーションを無限に繰り返すように設定します．そして，「スタート」をクリックしたらアニメーションを停止し，その時点のプロパティの値の位置から表示を開始します．そうすれば，「スタート」をクリックするタイミングによって異なる位置から表示が行われます．
熟語の 1 文字目 〜 4 文字目のそれぞれでアニメーションの速度を変えてあるので，「スタート」をクリックするタイミングによって 4 文字の組み合わせは変わります．

JavaScript 版では，表示する文字を選ぶ確率を出現頻度の重みにしたがって変えていますが，このプログラム（？）では，文字列に含まれる文字の個数を変えることで文字の出現頻度を変えています．
たとえば，JavaScript 版では熟語の 1 文字目については「一」は「哀」より 88 倍大きい確率で選んでいますが，このプログラムでは 1 文字目用の文字列に「哀」を 1 文字，「一」を 88 文字入れています．それによって，「一」は「哀」より 88 倍高い頻度で出現します．


文字の動かし方

文字が動き始めてから止まるまでの動きを作るために，次のようなアニメーションを順に行います．
  1. 「スタート」をクリックしてから「ストップ」をクリックするまでの間，文字を動かし続ける．

  2. 「ストップ」をクリックした後，一定個数文字を動かす．

  3. 文字が止まる位置を調整する．
「ストップ」をクリックした時点では 2 つの文字がそれぞれ部分的に表示された状態です．最後に止まったときはひとつの文字だけが表示されている状態にする必要があります．2 番目のアニメーションで一定個数文字を動かした後，3 番目のアニメーションで，部分的に表示されている文字を完全に表示されている状態になるまで進めます．

見た目の動きとしては，「スタート」と「ストップ」をクリックする度に文字が動いたり止まったりしますが，実際には上述の各アニメーションを二組用意して，それを交互に使っています．「スタート」と「ストップ」のボタンも二組用意します．
単純にアニメーションを開始／停止するだけならボタンは一組でよいのですが，このプログラムでは，表示開始位置をランダム化したり，停止するときに文字が順番に止まっていくようにするので，「スタート」と「ストップ」の二つのアクションだけでは，それができません．
そこで，ボタンを二組使って，それを次のように順にクリックしてもらうようにします．
1 番目の「スタート」ボタン
↓
1 番目の「ストップ」ボタン
↓
2 番目の「スタート」ボタン
↓
2 番目の「ストップ」ボタン
↓
1 番目の「スタート」ボタン
↓
：
こうして 4 つの状態を作ることで複雑なアニメーションを行っています．二組のアニメーションの一方で文字を動かしている間に，もう一方で次のアニメーションの準備をするような感じです．


カスタム プロパティの定義

このプログラムでは，いくつかのカスタム プロパティを @ルールの @property で定義しています．
@property の定義は，たとえばこのように書きます．
@property --a {
  syntax:'<integer>';
  inherits:true;
  initial-value:0;
}
このプログラムでは，カスタム プロパティにアニメーション（transition も含む）を使っているところがあります．カスタム プロパティにアニメーションを使うためには，そのプロパティがアニメーション可能である必要があります．
@property で syntax に <number> や <integer> を指定することで，そのプロパティをアニメーション可能にしています．

また，計算結果の小数を整数に丸めるためにも @property を使っています．整数のプロパティを定義して，計算結果をそのプロパティに設定することで，整数への丸めを行っています．
ただし，整数プロパティに小数値を設定した場合の丸めは四捨五入です．また，負の数で小数部が 0.5 の場合は負の無限大方向に丸められます（少なくとも Opera 80 では）．切り捨てのために整数プロパティを使う場合は，その点を考慮して使用する必要があります．


このおもちゃは Opera 80 以上用に作っていますが，Google Chrome 107 で動くことが確認できています．Google Chrome の他のバージョンでの動作は未確認です．
Firefox では，バージョン 105 の時点でまだ @property が未実装なので，動きません．


戻る