Kyashme出来るボタンを作る

この記事はかいげんAdventCalendar 9日目の記事です。

どうもこんにちは、前日に「明日書いて！🙏」と言われる事に定評があります　かたばみです。

記事ネタのストックが無かったのでいつか作ろうと思っていたKyashのリンクをTwitter共有ボタンの様な感じで扱える物を作ろうとしました

が、先に結論からいうと 完成しませんでした

作成過程

1: 「明日書いて！🙏」
　　全てはここから始まった

2: Kyash + Share ということでKyashareと名付けます
　　Casherとも音が似ている

3: KyashのURL Schemeを調べる
　　DevToolsを使えばPC上でもモバイルビューが確認出来ますね！

4: コードを書く

document.addEventListener('DOMContentLoaded', _=>
{
    var kyashare = document.getElementsByClassName('kyashare');
    for (var i = 0; i < kyashare.length; i++)
    {
        if (id = kyashare[i].dataset.id)
        {
            if(/^\d*$/.test(kyashare[i].dataset.id))
            {
                kyashare[i].onclick = _=>
                {
                    Open("kyash://qr/u/" + id);
                }
            }
            else if(/-/.test(kyashare[i].dataset.id))
            {
                kyashare[i].onclick = _=>
                {
                    Open("kyash://request/u/" + id);
                };
            }
            else
            {
                kyashare[i].onclick = _=>
                {
                    Open("https://kyash.me/payments/" + id);
                };
            }
        }
    }
});

function Open(url)
{
    if (/iphone|ipad|ipod|android/.test(navigator.userAgent.toLowerCase()))
    {
        location.href = url;

        setTimeout(_=>
        {
            location.href = "https://kyash.onelink.me/vsCO/f2fa01ea"
        }, 500);
    }
    else
    {
        // PC view
    }
}

ここまで書いた

何をやっているか解説していきます

if(/^\d*$/.test(kyashare[i].dataset.id))

これはHTML側を<a class="kyashare" data-id="QR/請求リンク/請求schemeの何れかのID"></a>の記法にしたかったため正規表現でそのIDがQR, 請求リンク, 請求schemeのどれであるかを振り分けています

   if (/iphone|ipad|ipod|android/.test(navigator.userAgent.toLowerCase()))
    {
        location.href = url;

        setTimeout(_=>
        {
            location.href = "https://kyash.onelink.me/vsCO/f2fa01ea"
        }, 500);
    }

UAにiphone, ipad, ipod, androidの何れかが含まれていれば(モバイル端末であれば)次の処理を行います

location.href = url;

kyash://の形のURL schemeを呼び、Kyashアプリの起動を試みます

       setTimeout(_=>
        {
            location.href = "https://kyash.onelink.me/vsCO/f2fa01ea"
        }, 500);

500ms待機し、Kyashアプリが起動されていなければ(ブラウザがバックグラウンドになっていなければ)Kyashのダウンロードリンクを開きます

5: 動くか確認する
　　Kyashアプリは呼ばれているのに何故かフォアグラウンドに来ない問題が発生しました　これは実装が悪いのかKyashアプリが悪いのか私の環境が悪いのか、複数端末を持っていない為検証できず

6: タイムアップ
　　次の日朝から予定が入っていたので早めに寝たため、9日が終わっていました

クリスマスに皆さんが使うであろう水風船よりも薄い内容になってしまいました　コードはWTFPLとかNYSLとかその辺にするのでJavaScript強い人はいい感じにしてください

それでは私は一日中外出して疲れたので寝ようと思います