Web呼び出しボタンシステム
Web Call Button System
開発製造 cooyou.org
トップページ
製品ページ
お問い合わせ先 admininfo@cooyou.org
概要
「Web呼び出しボタンシステム」は、無料のソフトウェア製品です。
従来の飲食店等での店員呼び出しブザーを市販のタブレットやPCを利用して高度化したシステムです。
クレイジースモールシリーズの非接触空中入力AirOneFT、ATch、AirFT（またはボタン式OneFT）と組み合わせて利用します。
業務用機器は使用しないため、様々な施設で利用することができます。
１セットからの小規模に対応するため、家庭内でも利用できます。
家庭内でナースコールのようなシステムも構築できます。
PC操作が多少できる方でしたらご自分でシステム導入できますから設置費やメンテナンス費もかかりません。システム構築は簡単です。
（Webブラウザで参照できるため、ルーターで外部ポートを公開するか、VPNを利用することでWiFi環境外のリモートからでも参照可能です。）
ご不明点はメールにてご質問ください。
インストールの手間は、WindowsのIPアドレスとセキュリティ設定くらいですから、非常に少ないです。
AirOneFT/ATch/OneFTもプリセットBボタンを押すだけで設定完了します。AirFTはスペースキーを任意プリセットの全方向へ設定してください。
システム構築するには、座席端末のタブレットや、サーバーとなるPCのハードウェアが必要です。別途ご用意ください。
移動端末用のタブレット（またはスマホ）も、もしも必要でしたらいくつでも使用することができます。
タブレットは別途電源供給が必要です。電源供給可能なドッグや、電源供給可能なUSBハブを利用してください。AirOneFT（ATchまたはAirFT,AirFT)でUSBを１つ使用します。
機器構成
座席側（１セット以上、台数任意）：タブレット（OS問わず,電源供給必要）＋OTGアダプタ＋USBケーブル＋クレイジースモールAirOneFT(ATchまたはOneFT,AirFT)
サーバー用PC（１台）：Windows10のPC。ノートPCでも動作します。常時動かすことになります。
移動端末（０台以上。台数任意、無くても可）：OS問わず。スマホまたはタブレットが良いでしょう。
※WiFi環境は必須です。
※端末がスリープしてブラウザの動作が停止すると更新状況が反映されません。
各端末の機能
(座席側)・ブラウザでアドレス欄に入れるURLに座席番号を入れるだけで、任意数の端末を利用できます。
・タブレットのブラウザ画面でリクエスト待ち、もしくはリクエスト中の状況を確認できます。
・クレイジースモールAirOneFT,ATch,OneFT,AirFTのどれかを利用できます。
・クレイジースモールAirOneFT、ATch、AirFTを利用した場合は、ボタンの代わりに非接触の空中入力が可能です。
新コロナウイルス等の感染防止に配慮できます。
・クレイジースモールOneFTを利用した場合は、従来型のボタンと同様に操作が可能です。
・リクエスト中の場合、画面タッチすることでリクエストを削除できます。
・リクエスト時には音が鳴ります。
・広告用のGIFアニメーションを２つ表示することができます。商品のプレゼン等に利用できます。
※クレイジースモールを使用しない方法はFAQを参照してください。
（サーバー用PC）
・別途Webサーバーやデータベースシステムをインストールする必要がありません。
・インストールは簡単です。カスタマイズが自由にできます。
・ブラウザ画面でリクエスト一覧画面を参照できます。時系列でリクエストが表示されます。
リクエストの削除ができます。新規リクエスト時は音が鳴ります。
（移動端末）
・ブラウザ画面でリクエスト一覧画面を参照できます。時系列でリクエストが表示されます。
リクエストの削除ができます。新規リクエスト時は音が鳴ります。
・移動端末を導入しなくても、座席側タブレットもしくはサーバーPCを操作することでリクエストの削除が可能です。
座席のタブレットの画面
座席にはタブレットとクレイジースモールAirOneFT（ATchまたはOneFTまたはAirFT)をUSBケーブルとOTGアダプタで接続します。電源供給可能なドッグや、電源供給可能なUSBハブを利用してください。
OSはAndroidでもiOS,iPadOSでも結構ですが、OTG機能がある機種が必要です。一部の機種ではOTG機能は接続時に設定で有効にする必要があります。設定なしで有効になる機種のほうがいいでしょう。
ケーブルの種類や接続方法の詳細はこちらのトップページに掲載してありますので参考にしてください。
充電専用USBケーブルですと動作しませんので、データ通信が出来るUSBケーブルが必要です。
タブレットはブラウザを使用します。
タブレットのブラウザアプリはフルスクリーン表示が出来るものをおすすめします。
（参考までに、Fully Kiosk BrowserというAndroidアプリで動作確認しております）
画面の左下、右下は下図ですと白画面ですが、広告用の場所でアニメーションGIFを設定できます。PCインストールフォルダのleft.gif,right.gifを置き換えるだけで動作します。
端末の数は自由に増やせます。座席番号を決めておいてURLに含めます。
接続しているクレイジースモールAirOneFT（ATchまたはOneFTまたはAirFT）はプリセットの切り替えを行っておいてください。
タブレット起動後に電源がOTGアダプタとUSBケーブル経由で供給されますので、側面の中央Bボタンを押してください。
プリセットがスペースキー出力となります。この設定は記憶されますので、設置時に一度行うだけで結構です。
※URLはhttpsではなくhttpですので記述ミスにご注意ください。
 | http://PCのIPアドレス/webbtn.exe?no=座席番号 で表示します。 (例)http://192.168.0.42/webbtn.exe?no=1 もしもポート番号を変更している場合は、http://PCのIPアドレス:ポート番号/webbtn.exe?no=座席番号 で表示します。 |
 | 上記はAirOneFTの画面です。OneFTの画面はこちらです。インストールフォルダ/AirOneFT（ATchもしくはOneFTもしくはAirFT)フォルダ内のファイルをインストールフォルダにコピーすることで機種の切り替えが出来ます。 |
 | ATchの画面はこちらです。 |
 | AirFTの画面はこちらです。 |
 | ３秒の手かざし（またはボタン押し）を感知すると、音が鳴って、この画面に切り替わります。 画面タッチで上の画面に戻ります。（リクエスト一覧表画面からも同様の操作が可能です。） タッチを無効化するにはカスタマイズが必要です。 |
リクエスト一覧表画面
これはサーバー用のPC上で表示してもいいですし、店員さんが持つタブレット（スマホ）でも結構です。複数端末で同じ画面を共有できます。※URLはhttpsではなくhttpですので記述ミスにご注意ください。
 | http://PCのIPアドレス/webstatus.exe で表示します。 (例)http://192.168.0.42/webstatus.exe もしもポート番号を変更している場合は、http://PCのIPアドレス:ポート番号/webstatus.exe で表示します。 画面が表示されましたら、画面をタッチしてください。本来この操作は不要なのですがブラウザで音を鳴らすために必要です。音が不要の場合はカスタマイズで無くすこともできます。 |
 | リクエスト一覧表が表示されます。リストが長い場合はスクロールできます。リクエストが何分何秒前だったかと、席番号が表示されます。新たなリクエストがあった場合には自動的に更新されて音が鳴ります。リクエストは古い順で表示されます。 |
 | 一覧表から任意の行をタッチするとポップアップが表示されます。（ポップアップはブラウザで禁止設定にしないでください）。「OK」ボタンを選択するとリクエストが削除されます。これは座席のタブレットとも連動します。座席のタブレットをタッチする動作と同じ意味です。 |
Windows10 PCのネットワーク設定
ネットワークの設定でIPアドレスはDHCPでの取得を無効にして、固定のIPを設定してください。 | デスクトップ画面左下のウインドウマークをクリックして、歯車マークをクリックします。 |
 | 設定画面の「ネットワークとインターネット」を選択します。 |
 | 「アダプターのオプションを変更する」を選択します。 |
 | 使用しているアダプターを右クリックして、”プロパティ”を選択します。 |
 | ”インターネットプロトコルバージョン４(TCP/IPv4)”をクリックします。 |
 | ”次のIPアドレスを使う”を選択して、IPアドレスとサブネットマスクを入力して「OK」ボタンをクリックします。 この例では192.168.0.42というアドレスと255.255.255.0のサブネットマスクを設定してます。 一般的にDHCPで自動的に取得されるIPアドレスは最後の桁(この例の42)が小さいものが多いので、不明な方は130番台以降の大きい数値がいいと思います。デフォルトゲートウェイや優先DNSサーバーには通常はWiFiルーターのアドレスを入れますが、インターネットにつながないのであれば入れなくてもいいです。 |
Windows10 PCのセキュリティ設定
Webサーバ(tanjunwsv.exe)を動作させるために待ち受けポートを開放する必要があります。 | デスクトップ画面左下のウインドウマークをクリックして、歯車マークをクリックします。 |
 | 設定画面の「更新とセキュリティ」を選択します。 |
 | 左側の”更新とセキュリティ”から「Windowsセキュリティ」を選択します。 |
 | Windowsセキュリティ画面の「ファイアウォールとネットワーク保護」を選択します。 |
 | ファイアウォールとネットワーク保護画面の”詳細設定”リンクをクリックします。（ユーザアカウント制御のダイアログが表示されたら「はい」を選択します。以降同じ） |
 | 左側の「受信の規則」をクリックします。次に右上の「新しい規則」をクリックします。 |
 | ”ポート”を選択して「次へ」ボタンをクリックします。 |
 | ”TCP”を選択。”特定のローカルポート”を選択してWebサーバのポート番号の80を入力して、「次へ」ボタンをクリックします。（環境変数で"SERVER_PORT"を作成して番号を記載してポート番号を変更可能です。その場合は設定した番号を記載します。） |
 | ”接続を許可する”を選択して「次へ」ボタンをクリックします。 |
 | ”プライベート”だけにチェックを入れて「次へ」ボタンをクリックします。（ドメイン管理の場合はドメインもチェックします。通常は不要） |
 | 名前を記載します。”webbtn”と記述して「完了」ボタンをクリックします。 |
Windows10 PCへのソフトウェアのインストール
こちらのwebbtn120.zipをダウンロードして、zipファイルを任意のフォルダに解凍します。一応、スペースの入らない英数のパスになるようなフォルダに入れてください。日本語やスペースの入るパスは動作確認しておりません。
例えば、C:\winbtn のようなところです
次に、使用する機器が
クレイジースモールAirOneFTの場合はインストールフォルダ/AirOneFTフォルダ内のファイルをインストールフォルダにコピーしてください。
クレイジースモールATchの場合はインストールフォルダ/ATchフォルダ内のファイルをインストールフォルダにコピーしてください。
クレイジースモールOneFTの場合はインストールフォルダ/OneFTフォルダ内のファイルをインストールフォルダにコピーしてください。
クレイジースモールAirFTの場合はインストールフォルダ/AirFTフォルダ内のファイルをインストールフォルダにコピーしてください。
(すでにどちらかをコピー済の場合は上書きコピーとなります。サブフォルダのほうは実行時は参照しません。インストールフォルダ直下のファイルのみ参照します。）
これでインストールは終わりです。
（Webサーバーのポートを変更する方法）
Windowsの環境変数にSERVER_PORTを作成してポート番号の数値を入力してください。
環境変数を設定する画面は、コントロールパネル（Windowsキー＋Rキーを押してcontrolと入力してOKボタン）の「システムとセキュリティ」を選択して、
「システム」を選択し、左側の”システムの詳細設定”をクリックして、「詳細設定」タブの「環境変数」ボタンをクリックします。
ユーザー環境変数でもシステム環境変数でもどちらでも結構ですが、新規作成して登録してください。登録が無い場合はデフォルトの80番となります。
Windows10 PCでの実行方法
インストールフォルダのserverrun.batを右クリックして”管理者として実行”を選択して実行します。Webサーバーのtanjunwsv.exeが実行されます。このバッチファイルは古いプロセスを消去してから新たに起動しますので、設定変更後実行することで反映します。
実行中は特にウインドウやアイコンの表示はされませんのでご注意ください。
起動中のプロセスを終了するにはserverkill.batを右クリックして”管理者として実行”を選択して実行します。
起動すると、ユーザーアカウント制御の確認ダイアログが出ますが「はい」を選択してください。
これでWebサーバが起動しましたので、各端末のブラウザのアドレス入力欄に指定のURLを入力して表示できます。
運用中はデータ保持用としてインストールフォルダにtbl.txtファイルが作成されます。もしも、リクエストを全クリアしたい場合はこのファイルを削除してください。
Web呼び出しボタンシステムのソフトウェアライセンス
商用、非商用に関わらず完全無料です。基本的に全て自由にご利用いただけます。
ベンダーや商社等がサポートサービスを付加することやカスタマイズを行うことで有償で販売いただいても結構です。
別名で販売いただいても結構です。
Webサーバー自体のソースコード以外のすべてのソースコードは製品に含まれております。
自由に改変、再配布していただいて結構です。
ファイルの詳細
HTMLや画像も自由に変更できますので、それだけで、十分にカスタマイズ可能です。独自のCGIとなるC#のソースコードもWindows10で標準に含まれているC#コンパイラでコマンドラインでコンパイル可能です。
コンパイルのためのバッチファイルが含まれておりますから各バッチファイルを実行するだけです。
webtbl.* データ管理用 webbtnやwebstatusのiframeから呼ばれます。
webbtn.* 座席端末画面用 主にwebbtn.htmlをカスタマイズするとよいです。
webstatus.* リクエスト一覧画面用 主にwebstatus.htmlをカスタマイズするとよいです。
拡張子が.exeが実行ファイルで、このソースファイルは.csファイルです。.batファイルで.exeファイルにコンパイルできます。
.exeを実行すると.htmlが読み込まれて.html内の%（なにか）%のキーワードだけ文字列置換されて、標準出力されます。
つまり.htmlは通常のHTMLとほぼ同じですが、テンプレートとして利用されてます。
Webサーバーのtanjunwsv.exeがその標準出力を各ブラウザに転送します。
*.jpg 各画像ファイル。置き換えてご利用下さい。
*.gif 広告表示用のアニメーションGIFです。無限ループするGIFファイルに置き換えてご利用下さい。
*.mp3 音のファイルです。置き換えてご利用下さい。
※カスタマイズ後はブラウザの画面再読み込みが必要です。
本システムを利用することによるいかなる損害も補償しません。
FAQ
・一覧表は表示できるのですが、座席用の画面が表示できません。
インストール時にサブフォルダのファイルをインストールフォルダ直下にコピーしているかご確認ください。AirOneFT用,ATch用,OneFT用,AirFT用があります。・リクエストが飛ばないです
webbtn.exeのURLにno=座席番号 の記載が、必要ですので、ご確認ください。お気に入りに入れておくといいと思います。また、クレイジースモールAirOneFT（ATchまたはOneFT,AirFT)が認識されているかご確認ください。
認識されていれば側面の中央BボタンでプリセットBにするとスペースキー出力設定になります。この設定は設置時に１度行うだけです。
たとえば、メモ帳アプリのようなアプリを使ってみて、入力欄にボタンを押したときにスペースが入るかどうかです。
なにも入力できていない場合は、OTG接続が無効なのかもしれません。普通は接続時になんらかのメッセージが表示されます。
USBケーブルも充電専用ではなくデータ通信ができるものが必要です。
また、サーバーPC上でWebサーバーが常時稼働していないといけません。
・一覧表画面の自動更新が遅いので、もっと早くしたいです。
webstatus.html内のsetTimeout(Update, 10000);の数値を小さくします。10000というのは10.000秒という意味です。更新間隔が短いとサーバーPCとの通信回数が多くなります。
・AirOneFTの動作を早くしたいのですが
webbtn.html内のtmr=setTimeout(Request, 2000);の2000(msec)の数値を小さくしてください。また、表示するメッセージや画像も併せて変更してください。AirOneFTは初期設定の感度低設定でも上空50cmくらいは感知しますから、あまり時間を短くすると誤動作が多くなってしまいます。
AirFTの場合は上空20㎝程度まで検知します。
・座席用タブレットではセルフパワーのUSBハブを使えばいいですか？
はい、そうです。ハブに電源供給するとタブレットにも給電されるのが最近のUSB type-Cのタブレットでは一般的だと思います。そしてクレイジースモールAirOneFT（またはATch,OneFT,AirFT)も認識されれば問題ありません。
・座席ではタブレットなしでボタンだけで運用できませんか？
AirOneFTやATch,OneFT,AirFTには通信機能も電源もありません。画面が不要ということでしたら、例えばRaspberry Piのような組み込み機器でブラウザを自動起動して、モニタなしで運用するというのは可能かと思います。キャンセル方法とボタン音はどうするかですが、コスト的には良いのではないでしょうか。
Linuxコマンドで実行するにはwgetを利用できます。
wget "http:(PCのIPアドレス）/webtbl.exe?no=座席番号&mode=R" はボタン押しの意味です。
mode=Cでキャンセルの意味です。
mode=Qは状態取得です。
パラメータなしで一覧取得です。
・給電しているはずですが、充電が減っていきます。
給電よりも消費電力が大きいとそのようになります。特に画面表示は電力消費が大きいので、画面は自動的に少し暗くなるように設定しておくといいと思います。
スリープすると完全に画面が消えますから、スリープさせない設定のほうがいいと思います。
・商品ディスプレイ用の画像を座席用タブレットに表示したいです。
left.gif、right.gifの画像を入れ替えてください。ループするアニメーションGIFとして作成することをおすすめします。無料でループ用のアニメーションGIFを作成できるサイトがありますから、そのようなサービスを利用するといいでしょう。
これらの画像ファイル以外もHTMLを編集いただくことで任意の位置に簡単に追加できると思います。
・HTMLファイルをカスタマイズしたいです。
座席用はwebbtn.htmlです。一覧用はwebstatus.htmlファイルです。javascriptやCSSはHTML内に記述しております。またタグによってはstyleタグをつけているものもあります。
・移動用タブレットでリクエストがあっても音が鳴りません。
スリープになっているとブラウザの動作が停止してしまうため、その間は更新が感知できません。そのため音も鳴りません。業務で常用する場合は、OSの設定によって、スリープしないようにする必要があります。もしくはスリープをしないようにするアプリもあると思いますのでお試しください。
リクエストの頻度が低い場合は、C#のソースをカスタマイズして、リクエストがあったらメール送信するなどの機能追加をするといいと思います。
C#でメール送信するコードは比較的簡単です。.Net4.0環境ですと、SmtpClientクラスを使うことになります。.Net4.5環境の場合はMailKitクラスです。
一般的にメール受信は動作優先度が高いためスリープ時でも動作することが多いです。もし動作しない場合は省電力モードの見直しを行うと改善するかもしれません。
受信するメーラーアプリで更新時間を短くしておくといいと思います。
同様にLINEでダイレクトメッセージ送信する機能を追加するのも一つの方法です。その場合はLINEの開発者登録が必要です。
どちらの場合もインターネット環境に接続している必要があります。また、サーバーメンテナンス中などで使えない場面もありえます。
・スリープ時にリクエストがあると音が鳴ることがあります。鳴らない時もあります。
スリープにも段階がありまして、浅いスリープと深いスリープがありますので、機種の設定によっても異なりますし、経過時間によって挙動が変わります。・サイレントモードにしても音が鳴ります。
機種によって違うかもしれませんが、OS標準の通知は使っておりませんのでバイブになるわけではありません。サウンドはインストールフォルダのpon1.mp3ファイルを使用してます。したがいまして、音を消すには、音量ボタン等でサウンドの音量をゼロにしてください。
もしくは常時無音にする場合は、mp3ファイルを無音のものに入れ替えるか、webstatus.htmlのファイルのPon1()関数内のdocument.getElementById('snd1').play();を削除してください。
・バイブレーションは使えませんか？
バイブレーションでお知らせする機能は入っておりません。インストールフォルダのmp3ファイルがサウンドファイルですからそれを再生してます。Android機の場合はchromeやFireFoxブラウザ等でバイブレーションがHTMLファイルのカスタマイズによって可能です。ただし、こちらも音と同様にスリープ時は無効になります。
webstatus.htmlのファイルのPon1()関数内にif(window.navigator.vibrate)window.navigator.vibrate([200,100,200]);を追加するだけです。
200msec振動して100msec待ってから200msec振動するという指定です。記述数を増やしたり、いろいろな振動を定義できます。
・なぜ座席用タブレットでタッチするとキャンセルする仕様なのですか？
移動用端末が無い場合、リクエストを削除するにはパソコンのブラウザ画面か、座席用端末しかありません。店員が座席に到着した時に１タッチでリクエストを削除できるようにです。付属のボタンで行うことも技術的には可能ですが、リクエストとキャンセルの２つの機能を持たせると使い方が混乱する可能性があるためです。
座席用端末でタッチでキャンセルできないようにするには、webbtn.htmlのdocument.addEventListener("mousedown", ClearMode);を削除します。
また、webbtn.html内の表示メッセージも使い方に沿って変更してください。
・一覧に残ってしまっているリクエストを全クリアしたいのですが
サーバーPCのインストールフォルダのtbl.txtファイルを削除してください。・tbl.txtファイルのフォーマットを教えてください。
yyyy/mm/dd(TAB)hh:mm:ss(TAB)席番号(TAB)R(TAB)はタブのこと。
リクエストの度に末尾行に１行追加されます。
リクエストが削除されると、対応する座席番号の行が削除されます。
１つの座席番号に複数行が対応することはありません。
Rというのは固定です。
例）
2020/04/16(TAB)09:27:48(TAB)1(TAB)R
この日付時刻を現在日時と比較して一覧表に経過時間を算出して表示してます。
・tbl.txtファイルを読み書きするときにページロックの必要はないのでしょうか？
Webサーバー内でシリアライズ化させてますのでCGIでは同期を考えてなくていいソースコードとなっております。・なぜ独自のWebサーバーで独自のCGIなのですか？
インストールを極力簡単にしたかったためです。また、perl,php,python等よりもhtmlファイルを変更すればいいだけなのでカスタマイズが簡単です。・Webサーバーのプロセス名を教えてください。
tanjunwsv.exeです。タスクマネージャで確認できます。・Webサーバーのポートを変更できますか？
環境変数で"SERVER_PORT"を作成して番号を記載してポート番号を変更可能です。手順に記載の通りですが、セキュリティ設定でポートの公開が必要です。デフォルトの80番以外はブラウザで表示する際に、URLにポートを明示する必要があります。
html内からiframeタグのsrcにアクセスする処理がありますが、そのURLにはポートは記載しません。自動的に設定したポートが使用されます。
・クレイジースモールを使わない方法はありますか？
webbtn.html内でe.key==" "という記述が２か所ありますから、これがスペースキーを感知している部分です。PCのブラウザで表示して、普通のキーボードでスペースを押すと同様に動作します。
PCのブラウザですとスペースキーがスクロール機能になっている場合がありますので、都合が悪い場合は別のキーに割り当てるといいと思います。
とりあえずソフトだけ動かしてみたいという場合に、１つのPC上のブラウザだけでも複数タブページで複数端末を模擬できます。
カスタマイズでキーボードを使わないように変更も出来るとは思いますが、クレイジースモールはご利用いただきたいというのが希望です。
単にお願いですので規約違反も罰則もありません。
座席用タブレットでクレイジースモールなしでタッチだけで運用するにはwebbtn.html内のClearMode関数内の一番はじめで
if((mode!= "R" && mode!= "QR") && keydownflag==0){keydownflag=1;Request();setTimeout (FlagClear, 2000);}
を追加するとタッチで呼び出しが出来るようになります。そして、表示メッセージや画像は適切なものに置き換えてください。
市販のテンキーをクレイジースモールの代わりに使用することも出来ます。webbtn.html内でe.key==" "という記述をキーに合わせて変更してください。
・クレイジースモールの横の小さい３つのボタンを無効にできますか？
プリセットに割り当てのキーは変更可能ですから、３つのボタンを全部同じキーに設定すれば、間違って押しても問題ありません。詳しい設定方法は各機器の取説を参考にしてください。製品ホームページからダウンロードできます。
初期設定でBボタンのプリセットがスペースだったので、それにソフトウェアを合わせただけです。
・ライセンスの種類を教えてください。
独自ライセンスです。BSDに近い自由度が高いものです。とにかく自由に使ってくださいということです。・有償サポートサービスはありますか？
cooyou.orgからはご提供の予定はございません。・電話サポートサービスはありますか？
cooyou.orgからはご提供の予定はございません。ご質問はメールadmininfo@cooyou.orgにて承っております。
Free Software
Web Call Button System
cooyou.org
admininfo@cooyou.org