# 【HTMLアプリ作成】SvelteでSVG要素を直接操作して制限時間表示できるタイマーを作ってみる |p2>2021/01/20{1}『Svelte』 ``` とこのように書くと、最初の`点(10, 0)`をMコマンドで指定するところから始まって、Lコマンドを繋げることで、`(10, 200) > (100, 200) > (50, 50) > (30, 250) > (120, 40)`と連続して直線を描くことができます。 !570*322*[1](article77/__1.jpg) [参考サイト｜オンラインツールSVG viewer/editor](https://www.rapidtables.com/web/tools/svg-viewer-editor.html) 直線を描くLコマンドは終点座標を指定するだけですので利用はとても簡単でしたが、円弧コマンド(A)は少し厄介です。 ```text 円弧コマンドの用法 ...(MとかLとかのコマンドが存在) A [x軸方向の半径] [y軸方向の半径] [x軸からの傾き(角度)] [円弧選択フラグ１(large-arc-flag)] [円弧選択フラグ２(sweep-flag)] [終点のx座標] [終点のy座標] ``` 見てのように、Aコマンドの引数は７つもあるので所見で混乱しやすいです。最初に使うと、|px>{2}「円弧選択フラグとは何ぞや？」 ``` Aコマンドを使うときには、この２つのフラグの組み合わせ(４通り)で、どの円弧を描きたいのかを明示に指定する必要があります。 !801*425*[2](article77/__2.jpg) 一般に、`円弧選択フラグ１(large-arc-flag)`では、フラグ値を1にすることで、２つの点のなす楕円弧のうち長い方(この例でいうと青か黄色の円弧)を指定できます。逆にフラグをゼロにすると短い方の円弧(ここでは赤か緑の円弧)を指定します。次に、`円弧選択フラグ２(sweep-flag)`では、始点から終点を円弧で結ぶ時に、時計回りの円弧か反時計周りの円弧かを指定するフラグです。このフラグ値を1にすると時計回りの円弧(この場合緑か黄色の円弧)を選択でき、フラグ値0で反時計周りの円弧(赤および青の円弧)を指定することになります。 - - - &[self]~[4]~[article]~(1) ## 残り時間をビジュアル化するということでSVGの直線・円弧の描き方のポイントを押さえて貰ったところで、以下のような制限時間表示するクロックを作ってみます。 @@@css2%[制限時間表示クロック①]{100%}{400px} @@@% このアプリは以下のソースコードをビルドしたものになります。 ```ts App.svelte

{Math.floor(period * timerCount / ticks)}秒

``` ではこのコードの実装のポイントを簡単に解説していきましょう。 ### SvelteでSVG要素をリアクティブに操作する他のJSフレームワークでも出来なくは無いのですが、Svelteはより直観的に動的な変化を伴うSVGの記述が出来ます。 ```ts App.svelteのスクリプト部の一部 const period = 10; // [秒] const ticks = 300; const timerPeriod = period * 1000 / ticks; let timerCount = 0; //👇SVGの円弧を終点座標(と円弧の選択フラグ)をリアクティブに更新する $: arcEndPosX = 50 * Math.sin(2*Math.PI*(timerCount / ticks)); $: arcEndPosY = -50 * Math.cos(2*Math.PI*(timerCount / ticks)); $: arcFlag = timerCount >= (ticks / 2) ? 1 : 0; onMount(() => { const interval = setInterval(() => { //👇300回(ticks)カウントしたらカウンターをゼロにリセット timerCount = timerCount >= ticks - 1 ? 0 : timerCount + 1; //...中略 //👇300カウントが10秒になるようにインターバル時間(timerPeriod)を調整 }, timerPeriod); //...以下略 ``` こうしておくことで、`timerCount`がsetIntervalのコールバックの中で更新され続けると同時に、SVGの終点座標等(`arcEndPosX / arcEndPosY / arcFlag`)もSvelteコードの中で自動更新されるようになります。 ```html App.svelteのHTML部分 ... ... ``` SVG画像自体は閉じたPath(最後のZを付ける)で描いています。 `M 0 0`で描き始めの点を指定し、そこから`L 0 -50`まで直線を描き、そこから終点`(arcEndPosX, arcEndPosY)`までのX軸からの傾き0で半径50の円弧を描きます。前述したように、SVGの円弧は指定した2点から円弧を作る関係で潜在的に4通りの円弧が描けるため、円弧選択フラグの１・２で適切に選ばないといけません。今回の場合には楕円ではないので、フラグ１か２のどちらか１つを切り替えるだけできちんとした円弧の切り替わりを作ることが出来ます。 ### タイマーカウンターを利用して表示内容を変える所要時間を表したクロックがくるくるまわるだけだとつまらないので、残り時間に連動して表示内容も変わるようにしてみます。 ```ts App.svelteのスクリプト部の一部 //...中略 onMount(() => { const interval = setInterval(() => { //👇300回(ticks)カウントしたらカウンターをゼロにリセット timerCount = timerCount >= ticks - 1 ? 0 : timerCount + 1; if (timerCount < ticks * 0.5) { //👈クロックが半分以下(~150カウント)の場合 messageSpan.textContent = `所要時間は${period}秒です`; } else if (timerCount >= ticks * 0.5 && timerCount < ticks ) { //👇クロックが半分以上(>150)になった時の処理 const remainTime = period * (1 - timerCount / ticks); messageSpan.textContent = `残り ${Math.floor(remainTime + 1)} 秒！`; } //👇300カウントが10秒になるようにインターバル時間(timerPeriod)を調整 }, timerPeriod); //...以下略 ``` これで残り時間が半分を切ったときに表示を切り替えることが出来ます。 - - - &[self]~[4]~[article]~(1) ## クロックの見栄えを改善するさらにモノクロだと少し味気ないので、残り時間と連動するように背景色を変えるように改造してみます。まず改造したアプリは以下のようになります。 @@@css2%[制限時間表示クロック②]{100%}{400px} @@@% ちょっと改造を施したSvelteコードは以下のようになります。 ```ts App.svelte

{Math.floor(period * timerCount / ticks)}秒

``` ### 改造したSvelteコードの解説まず、この改造では、SVG画像のPathに直接`fill="{色}"`でリアクティブなRGB色コード(16進法)を注入することで連続的に色が変わっています。 ```html SvelteのHTML部より抜粋 ... ... ``` ここで定義したRGB色コード文字列を与える以下の関数は、SvelteだけでなくJavascript全般に使えます。 ```ts RGB色コードを与える function rgb(_r: number, _g: number, _b: number) { let code = (1 << 24) + (_r << 16) + (_g << 8) + _b; return `#${code.toString(16).replace(/^1/,'')}`; } //使用例 console.log(rgb(124, 42, 55)); //👉#7c2a37 console.log(rgb(0xff, 0xc3, 0x20)); //👉#ffc320 ``` 使い方としては、`0 ~ 255`の値でRGB色を作るっているだけです。むしろここから色をシフトさせていくの方が難しく、今回は残り時間に連動させて`水色 > 黄色 > 赤色`にシームレスに変化していくように実装する感じで以下のようになっています。 ```ts App.svelteのスクリプト部分から抜粋 const interval = setInterval(() => { timerCount = timerCount >= ticks - 1 ? 0 : timerCount + 1; if (timerCount < ticks * 0.5) { //👇経過時間が半分以下なら色を固定 colorFill = rgb(0, 255, 255); messageSpan.textContent = `所要時間は${period}秒です`; } else if (timerCount >= ticks * 0.5 && timerCount < ticks*0.75 ) { //👇経過時間が半分以上７５％未満なら水色から黄色に色コードシフト const remainTime = period * (1 - timerCount / ticks); messageSpan.textContent = `残り ${Math.floor(remainTime + 1)} 秒！`; const colorShit = Math.round(255 * (remainTime/ (period / 4) - 1) ); colorFill = rgb(255 - colorShit, 255, colorShit); } else if (timerCount >= ticks * 0.75 && timerCount < ticks) { //👇経過時間が７５％以上なら黄色から赤色に色コードシフト const remainTime = period * (1 - timerCount / ticks); messageSpan.textContent = `残り ${Math.floor(remainTime + 1)} 秒！`; const colorShit = Math.round(255 * remainTime / (period / 4)); colorFill = rgb(255, colorShit, 0); } }, timerPeriod); ``` ここら辺はプログラマーの遊び心で色々と応用できると思いますので、もっと面白い効果などでも同じようなテクニックで作り込んでいけると思います。 - - - &[self]~[4]~[article]~(1) ## まとめ今回は、SvelteでSVG画像を柔軟に扱うための話を具体例を示しながら解説していきました。 Svelteの公式ページに色々とサンプルが紹介されいます通り、もっと派手なアニメーション効果も直感として分かりやすく実装できるのが、Svelteアプリ開発の魅力です。是非とも自分の指でキーボードをカタカタ叩いてみて、Svelteコードで出来ることを実感してみてはいかがでしょうか。