I log …

KLWPで流れる文字

目次

  1. テキスト設定
  2. 式を組み立てる
  3. 1行で表示できる場合は流さない
  4. いや、長いわ

【こちらは前サイトからの移植記事になります。】

 テキストスクロールというほどなめらかではないけど、ゆっくり流れる文字。
 イメージはこちら。(※容量削減のためアニメーションは途中で切れてます)
 
 ミニマルなデザインにしようと思ったらこんなのを使うのもいいかもしれない。
 こういうのをやりたいんだけど、文字にも動きつけれるんだろうか?
 わからないから無理やり実装。

テキスト設定

 テキストのフォントサイズを決める設定の際、「Fixed width(横幅を固定)」を選びます。また、それだと改行して表示されるので、表示できる行数を1行や2行などデザインに合わせます。

式を組み立てる

 今回は、直近のカレンダーイベントを表示するという体で組み立てていきます。

  1. まず、流れる文字(仮)というのは表示したい文章の何文字分かしか表示されていない状態です。
    となると、使うのは文字を抜き出すファンクションです。
    $tc(cut, [テキスト], [何文字目から表示するか], [何文字表示するか])$

  2. テキストは直近のカレンダーイベントなので $ci(title,0)$です。
  3. 何文字目から表示するか、というのが今回の大事なところです。
    数字を時間と共にカウントアップする必要があるので、タイマーユーティリティーを使い、 $tu(seq, 1/60, 0, [最後の数値])$となります。
    0から1秒ごとにカウントアップします。

  4. タイマーユーティリティーでどこまでカウントアップするかについて、これは文字数が決まっていれば文字数になります。
    今回はイベントタイトルということで毎回変わるので、イベントタイトルの文字数を数えます。
    $tc(len, ci(title, 0))$

  5. 何文字表示するかについては、表示できる行数を設定しているので必要ないのですが、それだとテキストの頭から1文字ずつ表示が増えていくので何か適当な数値を入れます。
    おすすめは先程とおなじ、タイトルの文字数です。

  6. 以上を組み合わせると、 $tc(cut, ci(title, 0), tu(seq, 1/60, 0, tc(len, ci(title, 0)), tc(len, ci(title, 0)))$となります。

1行で表示できる場合は流さない

 例えば1行に20文字入る場合。
$if(tc(len, ci(title, 0)) > 20, tc(cut, ci(title, 0), tu(seq, 1/60, 0, tc(len, ci(title, 0)), tc(len, ci(title, 0))), ci(title, 0))$

いや、長いわ

 条件分岐まで使うと3回も出てくる文字数カウントの式をグローバル変数に入れた方がすっきりします。
 全体のトップに戻って、グローバル変数に $tc(len, ci(title, 0))$を入れます。
  $if(gv(name) > 20, tc(cut, ci(title, 0), tu(seq, 1/60, 0, gv(name), gv(name)), ci(title, 0))$
 [name]は設定したグローバル変数名です。わかりやすく、短いものがいいですね。