Skip to main content

HTMLではじめる

HTMLからSpachaを呼び出すことができます．

準備​

  1. sample-spcディレクトリを作成します．

    mkdir -p sample-spc

  2. spacha.min.jsをダウンロードし，js/ディレクトリに置きます．

  3. index.htmlを用意します．

    index.html
    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Spacha Sample</title>
    </head>
    <body>

    </body>
    </html>

  4. ディレクトリ構造がこのようになっているかを確認します．

    sample-spc
    ├── index.html
    └── js
        └── spacha.min.js

    1 directory, 2 files

Spachaをセットアップ​

本セクションでは，HTMLで構成された次のようなスーパーチャットを作成します(画像としてのエクスポートはできません)．

  1. divタグを追加します

    index.html
    ...
    <body>
        <div id="spc-div"></div>
    </body>
    ...

  2. spacha.min.jsを読み込みます．

    index.html
    ...
    <body>
        <div id="spc-div"></div>
        <script src="js/spacha.min.js"></script>
    </body>
    ...

  3. spc-divをSpachaに読み込ませます．

    index.html
    ...
    <body>
        <div id="spc-div"></div>
        <script src="js/spacha.min.js"></script>
        <script>
            var spc = document.getElementById("spc-div");
            new Spacha(spc);
        </script>
    </body>
    ...

  4. HTMLをブラウザで開くと，スーパーチャットが生成されていることがわかります(リロードすると価格が変わります)． Example banner

  5. 細かいオプションを指定することができます 指定可能なオプションはこちらをご覧ください．

    index.html
    ...
    <body>
        <div id="spc-div"></div>
        <script src="js/spacha.min.js"></script>
        <script>
            var spc = document.getElementById("spc-div");
            new Spacha(spc, {
                message: "Hello, Spacha!",
                price: 2000,
                user: {
                    name: "Spacha User"
                }
            });
        </script>
    </body>
    ...

    Example banner

index.htmlの全体はこのようになっています．

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spacha Sample</title>
</head>

<body>
    <div id="spc-div"></div>
    <script src="js/spacha.min.js"></script>
    <script>
        var spc = document.getElementById("spc-div");
        new Spacha(spc, {
            message: "Hello, Spacha!",
            price: 2000,
            user: {
                name: "Spacha User"
            }
        });
    </script>
</body>

</html>

実装サンプル​

実装サンプルはこちらをご覧ください．