ギャラリーのテキストをスクロールさせてみよう - 知識ゼロからはじめるローコーディング開発

スマホアプリで文字数の多いテキストを表示するとき、レイアウトに悩むことってありますよね。最初の数文字だけ表示して、文章全体はポップアップや別画面で確認をしてもらえるようにしたり、予めラベルサイズを大きくとっておいたりすることがあると思います。今回お話するテクニックは、画面やポップアップを用意せずに、スクロールで文章全体を表示してみようというものです。

下に表示しているのは Power Apps で作成した植物図鑑ですが、ギャラリーにある説明文がとても長くて1行では収まりません。なので、この部分だけ、選択時に右から左へ文字が自動でスクロールするようにしてみたいと思います。

まずは　Power Apps でテキストを自動でスクロールさせるにはどうしたら良いのか、少し実験をしてみたいと思います。今回はSVGを使って作りますので、「＋挿入」で画面に画像を追加しましょう。

この画像のプロパティ[Image]には下図のように設定してみます。

最初の「"data:image/svg・・・」の部分はSVGの定例句ですので、そのまま書き写してください。widthは幅、heightは高さを設定するところですが、画像のプロパティ値(Self)をセットして、どのようなサイズにも合わせられるようにしておきましょう。
「"data:image/svg…」の箇所も定例句です。「<text x='0'…」はテキストの位置とサイズをセットしています。フォントのサイズとy座標の値を同じにしておくとピッタリと収まります。x座標は0と設定しておいてください。表示させるテキストは何でも良いですが、「Power Apps」として試してみたいと思います。

ここまで入力をしたあと、下図のように画像に「Power Apps」の文字が表示されていれば成功です。

それではテキストを自動でスクロールさせてみたいと思います。「<text x='0'…」の次の行で、下図のように「<animate… 」という文を記述すると、アニメーションを追加することが出来ます。

ここに「attributeName」という文がありますが、ここでイコールで指定した値がアニメーションの対象となります。下図では「x」を指定していますので、テキストのx座標を変化させることが出来ます。fromが初期値、toが変化後の値、durでは変化にかかる時間を指定します。この図ではx座標の値を、5秒間で0から100まで変化させるという設定となっています。「repeatCount='indefinite'」と指定すると、リピート回数が無限となります。

実行した際に「Power Apps」の文字が、5秒間かけて左から右へ移動を繰り返すことが出来ていれば成功です。

アニメーションの基本はわかりましたでしょうか。今度は「Power Apps」の文字が右から左へ移動し、全ての文字が枠の外へ出たタイミングで最初の状態に戻るように設定をしてみたいと思います。

「Power Apps」の文字は間の空白を含めて10文字ですので、移動する長さは22(文字サイズ)×10(文字数)となります。

この仕組みを組合わせたものが下図となります。「to」にセットする値は「to='"& -22 *Len("Power Apps") &"' 」と書けます。途中”＆”を使っているのはSVGから外れて、テキストの文字数を取得するLen関数を使うためです。

スクロールする文字数が変われば移動の速さも調整しなくてはなりません。値が同じだと、文字数が少ない時は早く、多い時はゆっくりスクロールすることになります。ここもLen関数を使って文字数をカウントし、durにセットしています。上図の設定では「文字数/2」秒でスクロールするように設定しています。「begin」はアニメーションが開始されるまでの時間をセットします。図ではギャラリーを選択して0.5秒後にスクロールするよう設定しています。

実行をすると、Power Apps の文字が右から左へスクロールし、全ての文字が画像の外へ隠れたタイミングで元の位置に戻ることを繰り返します。

それではこのプロパティを少し変更して、ギャラリーの文字をスクロールさせてみましょう。少し長いですが、全体は下図のようになります。

前述のプロパティから追加変更した箇所は「＜text…」の「fill='#FFFFFF'」。文字の色を変えることが出来ます。図では白に変更しています。それから、前述で「Power Apps」と記述していた箇所を「ThisItem.列名」にし、ギャラリーに紐づくデータソースの列をセットしています。

最後に「＜animet…」の箇所をギャラリーで選択したデータのテキストのみスクロールするようIf文で条件を加えれば完成です。

プロパティの内容を下記に張り付けましたので、試されたい方は、どうぞご利用ください。

■SVGテキストスクロール　画像[Image]

"data:image/svg+xml,"&
EncodeUrl(
"<svg
width='" & Self.Width &“’
height='" & Self.Height &“’ xmlns='http://www.w3.org/2000/svg’>
<text
x='0' y='22’
font-size='22’
fill='#FFFFFF'>" &

If(ThisItem.IsSelected=true,
"<animate attributeName='x’
from='0’
to='"& -22 *Len(ThisItem.列名) &“’
dur='" & Len(ThisItem.列名)/2 &"s’
begin='0.5s' repeatCount='indefinite’/>”
) &
ThisItem.列名 &“
</text>
</svg>"
)
※私のアプリの背景が黒ですので、文字を白（fill='#FFFFFF'）にしているのですが、白の背景で試される方は文字を黒（ fill='#000000'）にしてくださいね。（9行目）

実際に動いている様子はこちらです。