3．ブラウザを開き、http://127.0.0.1 へアクセスすると、ボタンが表示されます。ボタンを押すと音が鳴ります。ボタンを押しても反応しない場合は、起動した各サーバーの画面上でEnterキーを押すなどし、もう一度ボタンを押してみましょう。それでも反応しない場合は、一回閉じて、再度試してみてください。

4．起動したサーバーと同じWiFi環境に接続している端末は、ローカルIPからアクセスすることで、遅延を減らすことができます。ローカルIPの確認方法は、コマンドプロンプトを開き、ipconfigコマンドで表示できます。

5．外部のオンライン会場などに公開したい場合、ngrokを用います。[ngrok](https://ngrok.com/)から会員登録し、ソフトウェアをダウンロードしてください。固定のグローバルIPを持っている方は必要ありません。

6．コマンドプロンプトを開き、ngrok-stable-windows-amd64フォルダへ移動します。

~~~

cd ngrok-stable-windows-amd64

~~~

7．移動したら、下記コマンドでngrokを起動します。

~~~

ngrok http 80

~~~

8．下記のような表示が出たら、ブラウザを開き、http://xxxxxxxxxxxx.ngrok.io へアクセスします（例： http://67996bb0255f.ngrok.io ）。このURLを共有することで、外部からも現地に音を鳴らすことができます。[QRコード作成サイト／無料版](https://qr.quel.jp/)でQRコードを生成して配布するのもいいかと思います。起動するごとにドメインを固定したい場合はngrokのBasicプランに加入してください。

~~~

ngrok by @inconshreveable (Ctrl+C to quit)

Session Status online

Account Satoshi Gachi Fujimoto (Plan: Free)

Version 2.3.35

Region United States (us)

Web Interface http://127.0.0.1:4040

Forwarding

http://67996bb0255f.ngrok.io -> http://localhost:80

Forwarding

https://67996bb0255f.ngrok.io -> http://localhost:80

Connections ttl opn rt1 rt5 p50 p90

0 0 0.00 0.00 0.00 0.00

~~~

9．1分間の接続数には制限があり、Too Many Connectionsのエラーが出ることがあります。

[ngrok](https://ngrok.com/)へログインし、authtokenをコピーします。これを用いて、下記コマンドでアクティベートすることで、エラーを回避できます。

~~~

ngrok.exe authtoken xxxxxxxxxxxx

~~~

音源を変えたい方

1．helloworld/helloworld/templates/index.htmlを編集し、好みのボタンを作成します。nameは"button"で固定してください。valueは音源があるファイルパス名に変えてください。（ファイル形式はWAVとMP3は確認済み)

~~~html

<button type="submit" name="button" value="sound/mix01.wav" class="btn-circle-border-simple">ファイアー</button>

~~~

2．otacall.batを実行して、音源が変更できたことを確認しましょう。

ボタンを画像に変更したい方

1．otacall-v1.2.3\helloworld\helloworld\static\helloworld\imgにボタンにしたい画像を置きます。（例：1.png）

2．helloworld/helloworld/templates/index.htmlを編集します。staticフォルダを読み込むために最初に下記を追記します。

~~~

{% load staticfiles %}

~~~

画像ボタンのstyleの例です。

~~~

<style>

button {

width: auto;

padding: 0;

margin: 10px 10px 10px 10px;

background: white;

border: 0;

font-size: 0;

line-height: 0;

overflow: visible;

cursor: pointer;

}

</style>

~~~

buttonタグの中に画像を指定します。

~~~

<button type="submit" name="button" value="sound/mix00.wav"><img src={%static 'helloworld/img/1.png' %}

width="270"></img></button>

~~~

subdomainによるngrokの起動を含めたバッチファイルの使用方法

ngrokをアクティベートし、Basicプランで契約し、subdomainを登録します。otacall_subdomain.batをメモ帳などで開き、下記のnameのところを登録したsubdomainに変更します。otacallのディレクトリ直下にngrok.exeを配置し、otacall_subdomain.batを1クリックするだけで起動します。

~~~

start ./ngrok.exe http -subdomain=name 80

~~~

詳しい機能説明や使い方、導入のサポートについてはDMでお問い合わせください。