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

#　はじめに
前回作成した記事の続きです。
長押しボタンを作ってみた【円プログレス対応】

今回やりたいこと

前回、 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-gradientをbackground-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://github.com/takuhou/smart-ui/blob/feature/apply-multi-browser/index.html

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

今回の記事で書いたプログラミングの様子をYoutube上にアップロードしておりますので、是非ご覧ください。
【実況】長押しボタンをプログラミング【ブラウザ対応その１】
【実況】長押しボタンをプログラミング【ブラウザ対応その２】
えんじにぁ〜TV