HTML
CSS
JavaScript
conic-gradient

長押しボタンを作ってみた【マルチブラウザ対応】


 はじめに

前回作成した記事の続きです。

長押しボタンを作ってみた【円プログレス対応】


今回やりたいこと

前回、 conic-gradient を使って長押しの進捗を表現したのですが、この関数がChrome以外のブラウザだと、利用できないため、それをなんとかします。


調べる

conic-gradient をググると以下の記事がでてきます。

CSS4のconic-gradientを先取りする方法

こちらの記事を読んでみるとpolyfillが存在するらしいので、まずはそれを使ってみます。

CSS conic-gradient() polyfill


polyfillの導入

導入方法は、 polyfill用のjsを読み込ませるだけです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<script src="conic-gradient.js"></script>

conic-gradient.jsは、こちらに落ちているので、落として、読み込ませれば大丈夫です。


Edgeで動かない

ブラウザのコンソールに、以下エラーがでます。

SCRIPT1014: SCRIPT1014: Invalid character

conic-gradient.js内で使われているπとかτとかが、Edgeだとダメみたいです。

なので、πpaiτtauεepsilonに書き換えました。

これで動きました。

で、css部分を確認してみると、

background-imageとしてjs内で動的に作成したsvgを設定しているみたいです。


svgデータの準備

polyfillの処理でcssに設定されているconic-gradientbackground-imageに変換しているぽいのですが、

これを連続でリアルタイムに変換する方法がわからないので、あらかじめ、svgのデータを準備して、それをレンダリングする方法を考えました。

また、そのために必要なsvgデータを準備しました。

svg.js

20個のsvgデータ保持しているjsです。色は黒のみ。window.SMART_UIというグローバル変数に格納してあります。


レンダリング処理


index.js

・・・

if (ua.indexOf('firefox') > 0 || ua.indexOf('edge') > 0 || ua.indexOf('trident') > 0) {
var svg = 'url("' + SMART_UI.black[0] + '")';
outerCircle.style.backgroundImage = svg;
} else {
outerCircle.style.background = 'conic-gradient(black 0deg,white 0deg 360deg)';
}
・・・
progress = progress + (360 / (LIMIT / 100));
var outerCircle = document.getElementById('outer-circle');
if (ua.indexOf('firefox') > 0 || ua.indexOf('edge') > 0 || ua.indexOf('trident') > 0) {
var svg = 'url("' + SMART_UI.black[progress/18] + '")';
outerCircle.style.backgroundImage = svg;
} else {
outerCircle.style.background = 'conic-gradient(red ' + progress + 'deg, white 0deg 360deg)';
}
・・・

こんな感じでbackground-imageに動的にsvgを設定するようにしました。


完成

https://www.youtube.com/watch?v=gqiTLU8EBUE&t=2538

若干チラチラしますが、一応動きました。

ソースコードは、以下にあります。

https://github.com/takuhou/smart-ui/blob/feature/apply-multi-browser/index.html

今後の対応として、ライブラリ化します。

今回の記事で書いたプログラミングの様子をYoutube上にアップロードしておりますので、是非ご覧ください。

【実況】長押しボタンをプログラミング【ブラウザ対応その1】

【実況】長押しボタンをプログラミング【ブラウザ対応その2】

えんじにぁ〜TV