Deck URLステータス確認API

概要

Deck URLステータス確認APIは、Deckの通話画面が通話可能かどうかを判定できるAPIです。
このAPIを利用することで、Deckの通話画面へアクセスする事なく、通話可能かどうか・受付時間内かどうか等を知ることができます。
それにより、通話不可能な場合は通話画面へのリンクを無効化する、といった制御ができます。

API仕様書

本APIのAPI仕様書については、以下のリンクからダウンロードしてご確認下さい。
API仕様書

ご利用にあたって

本APIをご利用いただくには、運営会社であるスプレッドワンより発行されたAPIトークンが必要です。
APIトークンの発行を希望される場合は、お問合せページからご依頼下さい。

ご利用方法とデモ

はじめに、弊社で用意したライブラリを用いたAPIのご利用方法を説明いたします。続いて、APIを用いたデモとサンプルコードを提示いたします。
提示するサンプルコード及びライブラリはライセンスフリーのソースコードとしてご利用いただく事が可能です。

弊社で用意したライブラリを用いたAPIのご利用方法

ブラウザから本APIを利用して外部のdeckのページの通話ステータスを取得するために、ライブラリ[deck_api_v1.js]を活用した利用方法を解説いたします。
アプリでの利用など、javascript以外の言語からAPIを利用する場合はAPI仕様書をご参照下さい。

WebサイトでAPIを利用するには、APIを利用するWebサーバーへdeck_api_v1.jsをアップロードします。
Deck通話画面へリンクするaタグが設置されたページに以下のスクリプトタグを記載します。
deck_api_v1.jsのパスは適宜変更して下さい。
```
<script src="deck_api_v1.js" deck-api-config=""></script>
                    
```

deck-api-configの値にスプレッドワンより発行されたAPIトークンを設定して下さい。


<script src="deck_api_v1.js" deck-api-config="/* スプレッドワンより発行されたAPIトークン文字列 */"></script>

APIトークンが設定されるとDeckApi.getUrlStatus()関数が利用できるようになります。
以下のようにscriptタグを追加し、DeckApi.getUrlStatus()を実行して下さい。この関数を実行すると、ページ内のaタグからDeckへのリンクURLを抜き出し、各種ステータスを取得します。
```
<script src="deck_api_v1.js" deck-api-config="/* スプレッドワンより発行されたAPIトークン文字列 */"></script>
<script>
    DeckApi.getUrlStatus(data => {
        console.log(data);
    });
</script>
                    
```

DeckApi.getUrlStatus()は、第一引数にコールバック関数を取ります。このコールバック関数内でAPIの戻り値を利用できます。


<script src="deck_api_v1.js" deck-api-config="/* スプレッドワンより発行されたAPIトークン文字列 */"></script>
<script>
    DeckApi.getUrlStatus(data => {
        //
        // API成功時の処理サンプル
        // このコールバック関数を自由に書き換えてAPIの戻り値をご利用下さい。
        //

        console.log(data);

        data.forEach(item => {
            if (item.is_callable) {
                console.log(item.url + ' : 通話可能');
                // TODO: 通話可能なので対応するリンクを有効化 etc.
            } else {
                console.log(item.url + ' : 通話不能');
                // TODO: 通話不可能なので対応するリンクを無効化 etc.
            }
            console.log('description : ' + item.status.description);
        });
    });
</script>

第二引数にはAPI失敗時のコールバック関数が指定できます。こちらは指定しなくても構いません。


<script src="deck_api_v1.js" deck-api-config="/* スプレッドワンより発行されたAPIトークン文字列 */"></script>
<script>
    DeckApi.getUrlStatus(data => {
        //
        // API成功時の処理サンプル
        // このコールバック関数を自由に書き換えてAPIの戻り値をご利用下さい。
        //

        console.log(data);

        data.forEach(item => {
            if (item.is_callable) {
                console.log(item.url + ' : 通話可能');
                // TODO: 通話可能なので対応するリンクを有効化 etc.
            } else {
                console.log(item.url + ' : 通話不能');
                // TODO: 通話不可能なので対応するリンクを無効化 etc.
            }
            console.log('description : ' + item.status.description);
        });
    },
    () => {
        //
        // API失敗時の処理
        //
    });
</script>

ライブラリを用いたAPIの利用方法の説明は以上になります。

デモとサンプルコード

本APIを利用したデモとサンプルコードを以下に示します。

デモ

以下の「APIデモの実行」ボタンを押すことで、ボタン下に示す2件のDeckのページのタイトル及び通話可能かどうかのステータスを外部から取得するデモを行います。

https://deck-support.deck-app.jp
ページタイトル
ステータス：未確認

https://kamiyama.deck-app.jp
ページタイトル
ステータス：未確認

サンプルコード

上記デモの実行コードを以下に示します。


<script src="deck_api_v1.js" deck-api-config="/* スプレッドワンより発行されたAPIトークン文字列 */"></script>
<script>
    document.querySelector('#demo_frame button').addEventListener('click', () => {
        submitApi();
    });

    function submitApi() {
        // 文言表示先domの表示内容を初期化
        document.querySelectorAll('.page-name').forEach(elm => {
            elm.innerText = 'タイトル確認中…';
        });
        document.querySelectorAll('.page-status > span').forEach(elm => {
            elm.innerText = '確認中…';
        });

        // APIを実行
        DeckApi.getUrlStatus(data => {
            console.log(data);
            const allElements = Array.from(document.querySelectorAll('a'));
            data.forEach(item => {
                if (item.is_callable) {
                    console.log(item.url + ' : 通話可能');
                } else {
                    console.log(item.url + ' : 通話不能');
                }

                // URLごとに、対応するaタグを抽出
                const elements = allElements.filter(element => {
                    return element.href.startsWith(item.url);
                });
                console.log(elements);

                elements.forEach(elm => {
                    // item.titleはNULLが返る場合もある
                    elm.querySelector('.page-name').innerText = item.title || '';

                    // item.status.descriptionには表示用ステータス文言が返ってくる
                    elm.querySelector('.page-status > span').innerText = item.status.description;
                });
            });
        });
    }
</script>

上記サンプルコードはライセンスフリーです。ご自由にコピーなどをしてご利用いただけます。