No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is even with natsumo:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
WeddingProjectWebApp
WeddingProjectWebApp_Script
readme-images
README.md

README.md

『全員参加!メッセージ送信ゲーム』Webアプリ

app_image_0

概要

  • 同僚の披露宴の余興で実施した『全員参加!メッセージ送信ゲーム』のクライアント側Webアプリです
  • ゲームを動作させるためには本Webアプリの準備の他、「ゲーム本体【Unity】」の環境構築が必要です
  • 「ゲーム本体【Unity】」については以下を参照してください
    • ページ準備中

『全員参加!メッセージ送信ゲーム』とは?

game_image

  • 『全員参加!メッセージ送信ゲーム』は100人超の披露宴参加者全員参加で遊べるお祝いゲームです
  • 各自所有しているスマートフォンから指定URLにアクセスすることで誰でも参加できます
  • URLにアクセスしたら「名前」と「自撮り画像」を登録します
  • ゲームが開始されたら新郎新婦へのお祝いのメッセージを送ります
  • お祝いメッセージが登録されると、ゲーム本体に写真付きメッセージが表示されていきます
  • お祝いメッセージがいっぱいになると…何かが起こる!?

『全員参加!メッセージ送信ゲーム』Webアプリ事前準備

動作までの手順

1. プロジェクトのダウンロード

2. mBaaS にアプリを作成

  • mBaaS にログインします

  • アプリの新規作成をします

    • 既に他のアプリを作成済みの場合は、左上の「+新しいアプリ」をクリックします

create_mb_app_1

  • APIキー が発行されます

create_mb_app_2

  • 後ほど使用しますので、ここは「OK」をクリックして閉じます
  • 閉じるとダッシュボード(管理画面)が表示されます

3. プロジェクトファイルの編集

  • 先ほどダウンロードし、解凍しておいたフォルダを開きます

dl_files_1

  • mBaaS を利用するため、以下の ファイルを編集します

    • WeddingProjectWebApp フォルダ内

      • wedding_project_web_app.js
      • wedding_project_web_app.html

      dl_files_2

    • wedding_project_web_app_script フォルダ内

      • wedding_project_web_app_script.js

      dl_files_3

  • wedding_project_web_app.jswedding_project_web_app_script.js に mBaaS でアプリを作成した際に生成された APIキー を設定します

// API KEY
var applicationKey = "YOUR_NCMB_APPLICATION_KEY";
var clientKey      = "YOUR_NCMB_CLIENT_KEY";
  • APIキー は、mBaaS ダッシュボードの右上「アプリ設定」から確認できます

check_mb_api_key

  • YOUR_NCMB_APPLICATION_KEYYOUR_NCMB_CLIENT_KEY を「アプリケーションキー」と「クライアントキー」にそれぞれ書き換えてください

  • 書き換えたら保存します

  • 次に、wedding_project_web_app.htmlを編集します(10行目)

<!-- Open File URL -->
<meta property="og:url" content="https://mb.api.cloud.nifty.com/2013-09-01/applications/YOUR_NCMB_APPLICATION_ID/publicFiles/" />
  • YOUR_NCMB_APPLICATION_ID の部分を mBaaSのアプリIDに書き換えます
  • アプリIDは mBaaS ダッシュボードのURLに記載しています
  • 例では ********** としている箇所がアプリIDです
例)
https://console.mb.cloud.nifty.com/#/applications/**********/
  • 書き換えたら保存します

3. ファイルのアップロード

  • 編集したファイルを含む以下のファイルをそれぞれ mBaaS の ファイルストア 、スクリプト にアップロードします
    • WeddingProjectWebApp フォルダ内のすべてのファイル(11ファイル)
      ⇒ 「ファイルストア」へ
    • wedding_project_web_app_script フォルダ内のファイル(1ファイル)
      ⇒ 「スクリプト」へ

「ファイルストア」へのアップロード

  • ダッシュボードから「ファイルストア」を開き、「↑アップロード」ボタンをクリックします

upload_files_1

  • ドラック&ドロップ、または「ファイルを選択する」ボタンをクリックして「WeddingProjectWebApp」フォルダ内のファイル(11ファイル)をすべて選択します

upload_files_2

  • 選択すると以下のようになります

upload_files_3

  • 問題なければ「アップロードする」ボタンをクリックします
  • アップロードが無事完了すると図のように表示されます

upload_files_4

「スクリプト」へのアップロード

  • 同じくダッシュボードから「スクリプト」を開き、「↑アップロード」ボタンをクリックします upload_script_1

  • ドラック&ドロップ、または「ファイルを選択する」ボタンをクリックして「wedding_project_web_app_script」フォルダ内のファイル(1ファイル)を選択します

upload_script_2

  • 選択すると設定項目が表示されますので以下のように設定します
    • メソッド:「GET」
    • ファイルの状態:「実行可能」
    • 上記以外の設定は任意
  • 問題なければ「アップロードする」ボタンをクリックします
  • アップロードが無事完了すると図のように表示されます

upload_script_3

4. 公開ファイル許可設定

  • ダッシュボード右上の「アプリ設定」から、「データ・ファイルストア」の「公開ファイル設定」を「有効」に設定し、「保存する」をクリックします

mb_settings_1

5. Webアプリを起動する

  • ダッシュボードから「ファイルストア」を開き、wedding_project_web_app.html をクリックします
  • 「公開ファイルURL」にURLが作成されていますので、クリックします

open_app

  • Webアプリが起動します

app_image_1

  • このURLを披露宴の参加者に配ることでゲームに参加できます

遊び方 ~参加方法~

  • URLにアクセスして、名前の入力と写真ファイルの選択をします
  • 「Regist」ボタンを押します

app_image_1

  • ゲームが開始したら、お祝いメッセージを送ります
  • 「おめでとう」ボタン(ベトナム語あり)または、自由記述でメッセージを送ることができます

app_image_2

解説

  • 最初に登録する名前と自撮り画像のデータとお祝いメッセージのデータはすべて mBaaS に保存されます
  • mBaaS に保存することでオンライン化され、ゲーム本体【Unity】からデータを使用できるようになります

自撮り画像の保存

  • 画像データは、 ファイルストア に保存しています
  • ファイル名(photoName)とファイルデータ(photoData)を引数に設定することで保存ができます
    • WeddingProjectWebApp/wedding_project_web_app.js 131行目参照
ncmb.File.upload(photoName, photoData)
    .then(function(res){
        // アップロード成功時の処理

    })
    .catch(function(err){
        // アップロード失敗時の処理

    });

お祝いメッセージの保存(同時接続制御)

  • 文字データは、 データストア に保存しています
  • ただ保存するのではなく、100人超参加者が 同時アクセス 可能なように スクリプト 機能を利用しています
  • Webアプリ側ではスクリプトを呼び出します
    • WeddingProjectWebApp/wedding_project_web_app.js 189行目参照
ncmb.Script
    .query({"name": enc_name, "message": enc_message, "photoName": enc_photoName})
    .exec("GET", "wedding_project_web_app_script.js")
    .then(function(res){
        // 実行成功時の処理

    })
    .catch(function(error){
        // 実行失敗時の処理

    });
  • スクリプト側で保存を実行します
    • WeddingProjectWebApp_Script/wedding_project_web_app_script.js 22行目参照
var Congratulation = ncmb.DataStore('Congratulation');
var congratulation = new Congratulation();
congratulation.set("name", name)
              .set("message", message)
              .set("photoName", photoName)
              .save()
              .then(function(result){
                  // success
                  res.send(result);
              })
              .catch(function(error){
                  // failure
                  res.send(error);
              });

Unityとの連携イメージ

  • Webアプリから mBaaS に保存されたデータは ゲーム本体【Unity】で使用されます
  • お祝いメッセージが mBaaS に保存されたことを感知し、データを取得してゲームを進める仕組みです
  • 詳細は ゲーム本体【Unity】の解説ページ を参照ください
    • ページ準備中

参考

  • このゲームは余興などのあくまで 一時 楽しむゲームであるため、APIキーは丸見えの状態で使用しています。。継続して使用する場合は考慮する必要があります。