2年前に作ったものを今更ながら公開しました

July 21, 2014

先日のNDS#36のLTでしゃべった内容について、ようやくGitHubにアップしましたので、説明します。かなり期間が空いてしまったのは、反省点。

何を作ったのか？

ビンゴゲームで、あたった番号を表示するアプリです。また景品の画像も表示できるようにしてます。

サンプルはGitHubに公開しています。

なぜ作ったのか？

NDS#36のLTでしゃべったのですが、時間がほとんどない状況だったので、詳しくしゃべれませんでした。

結婚式の2次会用に作ったものです。今まで、結婚式2次会幹事を4回やっておりますが、余興を考えていると、あんまり凝った内容のものは、参加者はお酒が入って酔っ払っているため、さっぱり覚えきれなくてつまらくなってしまうんです。

3回目の2次会幹事の際に、「適当ビンゴ」なるものをやりました。（ググるといろいろ出てきます。）これは、新郎新婦にゆかりのある数字や、司会者の判断（時間的な都合等）で、一気に複数の数字があたるようなビンゴになっています。

ビンゴマシーンいらずで、ビンゴカードのみで実施できるのですが、参加人数が100人規模だったので、何番が該当するのか口頭だけだと伝わりにくいなぁということと何番がまだコールされていないかが司会者が判断しにくいということで、「会場のプロジェクタやモニタ使って、番号を表示してしまえばいいじゃん」ということになりました。

さくっとできそうだったので、私が2時間程度で作ってしまいました。（内1時間は画像作成）

使い方

ただのHTMLなので、ブラウザで開いて、お使いください。

入手先

まずは、GitHubから、ダウンロードしてください。ダウンロードの仕方がわからない方は、右側メニューの下側にある「Download ZIP」をクリックし、ダウンロードしたzipファイルを解凍します。

ダウンロードリンクもここに貼っておくので、ここからダウンロードしてもかまいません。

起動方法

番号の横並び、もしくは、縦並びがあります。 index.html もしくは vertical.html をブラウザで開いてください。ブラウザで開いたら、URL表示部分等を隠すために、全画面表示することをオススメします。

初期状態へ戻す

ブラウザの再表示（F5など）で、最初の表示に戻ります。

終了方法

ブラウザを閉じるだけです。

画像の差替

景品画像等を表示するために、画面左側にマウスカーソルを合わせるとリンクがにょきっと出てきます。

リンクをクリックすると、画像がモーダル風に表示されます。

黒背景部分をクリックすると、画像が非表示になり、元に戻ります。

GitHubにあるのは、サンプル画像なので、適宜差し替えてご使用ください。

画像の保存場所

imagesディレクトリ内に保存してください。

画像の呼び出し変更

index.htmlもしくはvertical.htmlの以下の部分をテキストエディタで編集します。

      <ul id='navigation'>
        <li class='A'><a title='A賞' class='openmodalbox' href='images/A.jpg'>A賞</a></li>
        <li class='B'><a title='B賞' class='openmodalbox' href='images/B.jpg'>B賞</a></li>
        <li class='C'><a title='C賞' class='openmodalbox' href='images/C.jpg'>C賞</a></li>
      </ul>

href='images/A.jpg'部分に画像ファイル名を、A賞部分に画面に表示されるリンク名（景品名等）を各々変更してください。景品の数が多い場合は、<liから始まる1行をコピペして景品数分並べてください。

今後の予定？

せっかく公開したので、何か作りたい。自分の勉強のために、Webサービス化してもいいかも。

後は、タブレット対応して、番号を押しやすくしてみたい。

注意

本アプリケーションによって生じるいかなる損失等は、当方は一切の責任を持ちません。特に、画像の呼び出し変更部分の際に、誤ってアプリケーションが動かなくなる等の事が発生することが想定されますが、当方は一切のサポートはできません。 HTMLに詳しい身内の方に修正をお願いしてください。

また、動作環境はMac版のGoogle Chromeで行っています。 Google ChromeおよびMozilla Firefoxで動作しますが、 Microsoft Internet Explorerでは動作しません。