JPSPS 東京運営を手伝って -3-

前回はAccessを用いた「受付けアプリ」でした。

今回は「SharePointクイズ大会用アプリ」について書いていきたいと思います。

作成物 利用した製品/サービス
SharePoint クイズ大会用アプリ ・坂本さんのアプリを ほぼそのまま利用!
・Azure Webサイト
・SQL Azure

コンセプトは下記を考えました。

  • PCでもスマホでも動くWebアプリ
  • リアルタイム性を持たせて、進行のコントロールを行う
  • 同じく、参加者が正解/不正解をリアルタイムに分かるようにする
  • 出来ればASP.NETで

自作し始めていたのですが、誰か作ってるだろうとググってみると・・・!!

なんとこちらのページにたどり着きました。(やったー!)
ASP.NET SignalR によるクイズWebアプリ
「みんなで同時プレイするWebアプリでCodeQuizに挑戦!」

http://devadjust.exblog.jp/19669409/

MVPの坂本 純一さんが 2013年のイベントで作られたモノです。
http://mvp.microsoft.com/ja-jp/mvp/Junichi%20Sakamoto-4032162

詳細はサイトを参照ください。
コンセプトをほぼカバーしていることが分かり、すぐさま坂本さんに連絡。
GitHubに公開しているソースでもあり、イベントで利用することに快諾いただけました。

下記はクイズアプリの動作についての動画です。
*坂本さんのサイトにリンクがありました
こちらを見てもらった方がいいですね。

画面の左が回答者、右上が進行者。右下がダッシュボードです。

進行者が操作を行うと、すぐに回答者のブラウザ画面が切り替わったり、回答者が回答を選択するとダッシュボードにステータスが反映されたりと、リアルタイム(正確にはニアリアル)に制御されているのが見ていただけると思います。

ほぼそのままアプリを使うことが出来ましたので、大変楽をさせてもらいました。

JPSPS用に修正したのは大きく3点ほど。

  1. 管理者アカウントの設定

    • 今回は主催者側がコントロールする想定なので

  2. ダッシュボードの並び替え

    • 参加人数が多いことが予想されるので、正解者が分かりやすいように。

  3. 微妙に文言/サイズ修正

    • ある程度サイズの小さな画面向けに文言やサイズの修正を行いました。

後は出来上がったコードをAzure上に配置するだけです。

1番と2番の修正点を簡単に書いておきます。

1. 管理者アカウントの設定
管理者フラグを足して判別したりしているわけでは無く、ある任意の「ユーザー名の場合」という処理を入れているだけです。

AccountController.cs – SingIn()
HomeController.cs – Index()
AdminController.cs – Index()

&amp;amp;amp;lt;br /&amp;amp;amp;gt;&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	if (model.HandleName == &amp;amp;amp;amp;quot;管理者名&amp;amp;amp;amp;quot;)&amp;amp;amp;lt;br /&amp;amp;amp;gt;&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	{&amp;amp;amp;lt;br /&amp;amp;amp;gt;&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	return Redirect(&amp;amp;amp;amp;quot;/Admin&amp;amp;amp;amp;quot;);&amp;amp;amp;lt;br /&amp;amp;amp;gt;&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	}&amp;amp;amp;lt;br /&amp;amp;amp;gt;&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	return Redirect(&amp;amp;amp;amp;quot;~/Player&amp;amp;amp;amp;quot;);&amp;amp;amp;lt;br /&amp;amp;amp;gt;&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	

「管理者名」以外だったら Play画面に飛ぶってだけです。
単発の利用なので管理者名が漏れることも無いだろうと簡易な処理にしています。
#合わせて ダブらないだろうという名前にしています
普通の社内利用や納品物を考えるとあり得ませんが、そこは時間の短縮ということで。

2. ダッシュボードの並び替え
正解数が多いユーザーが上に来るようにしました。
いちいち見るのが大変ですからね・・・

DashboardViewModel.cs – DashboardViewModel()

&amp;amp;amp;lt;br /&amp;amp;amp;gt;&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	// .OrderBy(user =&amp;amp;amp;amp;gt; user.Name)&amp;amp;amp;lt;br /&amp;amp;amp;gt;&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	.OrderByDescending(user =&amp;amp;amp;amp;gt; Answers.Count(a =&amp;amp;amp;amp;gt; a.PlayerID == user.UserId &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; a.Status == AnswerStateType.Correct))&amp;amp;amp;lt;br /&amp;amp;amp;gt;&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	

OrderByを変更してるだけです。

最後に、Azureへの配置方法も書いておきます。

発行
ビルド(B) – QuizWebApp の発行(H)
を選択します。
またはソリューション エクスプローラ から プロジェクトを右クリックし「発行(B)」を選択してもオッケーです。
image

Web を発行」画面の発行先から「Microsoft Azure Websites(W)」を選択します。
image

新規Azureサイトを作成します。
#下記は適当に入力した内容なのであしからず

  • サイト名(N):
    重複しないようチェックしてくれるので、グリーンのチェックマークがつくまで名前を入力して試してください。
  • リージョン(R)
    近いところで
  • データベース サーバー(D):
    今回データベースを使うので、新規作成しておいてください

    • 合わせてデータベース ユーザー名とパスワードを設定してください

image
[作成]ボタンをクリックすると、サイトとデータベースが作成されます。

作成されたサーバー情報等々が入力された状態で次のページが表示されます。
image
もし事前にAzure上にサイトを作成している場合は、サーバー情報等を入力してください。
接続の検証(V)」をクリックするとチェックされ、オッケーの場合緑のマークが入ります。

後は「次へ(X)」、「次へ(X)」と進んで 「発行(P)」ボタンをクリックします。
image

image

発行が完了すると、自動的にAzureのサイトが表示されます。
アドレスが「***.azurewebsites.net」になっています。
image

これでAzure上への発行は以上となります。

と、余談。

GitHub上の QuizWebAppソリューションを VS2013で開いて、NuGetパッケージが自動で復元しない場合、パッケージマネージャ等から「復元」してあげてください。
image

また、このまま「Azureに発行!」しても、エラーが表示されます。
image
これだと意味が分からないので、Web.Configに customErrors mode を追加して再度発行。

エラー内容を見てみると・・・Could not load file or assembly・・・
image

あ、そゆことね・・・仕方ない(仕様なので)ので、エラー表示されているアセンブリのローカルコピーをTrueにします。

image

で、また発行、まだエラーになりますが、同じような内容なのでエラーが表示されなくなるまで各アセンブリのローカルコピーをTrueにし発行していってください。
先ほど自身の環境で試したところ、下記3つのアセンブリが対象でした。

  • System.Web.Http
  • System.Web.Http.WebHost
  • System.Net.Http.Formatting

これでAzure上でも動作できました(グー

次回はデータ周りの予定です。

データをSQL Azureに格納したので、次はSharePoint Onlineのリストにコピーします。
合わせてクレンジングも少ししましょうか。

Akira Fukami

  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA