シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > 「対戦型クイズ」のWebアプリを、コーディングせずに開発可能な「quizshow」はスマホ連携が熱い!
注目記事ピックアップ
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
share0
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
share0
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2015/01/09 21:40

「対戦型クイズ」のWebアプリを、コーディングせずに開発可能な「quizshow」はスマホ連携が熱い!

quizshow_01 どうも、まさとらん(@0310lan)です!

今回は、「クイズ系」のWebアプリを開発したい人に朗報です!

「問題」と「回答」を入力するだけで、PC・スマホで動く本格的な「クイズアプリ」を制作できるWebサービスをご紹介します!

スマホと連携することで複数人の対戦も出来るうえ、「早押しボタン」の代わりにもなるスグレモノです。

それが、「quizshow.io」です!
quizshow_02

どうやって使うの?
まずは、サイトのトップ画面から「ユーザー登録」を済ませましょう。
quizshow_03 メルアドだけあればOKというお手軽さ。


次に、クイズアプリの名称を設定します。
quizshow_04

すると、クイズを制作していくメインの「編集画面」が表示されます。
quizshow_05

そこで、「+Add Question」ボタンをクリック!
quizshow_06

「問題」と「回答」が設定出来るので、好きなクイズを入力します。
quizshow_07 「詳細設定」を開くと、回答時間、獲得ポイント、効果音…など、さらに細かく編集できるようになっています。

あとは好きなだけ「クイズ」を追加していけばOK!

ある程度完成したら、「Preview Show」をクリックします。
quizshow_08

するとブラウザ上で、今作ったクイズゲームが開始されるので、「参加人数」や「プレイヤー名」を設定します。
quizshow_09

「Start Quiz Show!」ボタンをクリック!
quizshow_10

先ほど作った問題が出題されます。
quizshow_11

画面のアニメーションや効果音などは、すでに完成しているので、あとは思う存分遊ぶだけ!
quizshow_12 簡単ですよね?

これなら、学習向けの教材として作ってみたり、誕生日や年末年始のパーティなどにも素早く作って楽しめそうです。


複数人で対戦するなら、「スマホ連携」が面白い!
「quizshow」は、複数人で対戦を楽しむために「早押しボタン」機能を搭載しているのが特徴です。

例えば、3人で遊んでいる場合、回答するためには誰よりも早く「回答ボタン」を押す必要があるのです。
quizshow_13 ここで言う「早押しボタン」とは、個別に設定されているキーボードの「キー」を叩くという意味です。


今回の例で言うと、「Player1」が回答するためには、素早く「Q」キーを叩いて回答権を得る必要があるわけです。
quizshow_14

あとは、制限時間内までに正解を選べばOKです。
quizshow_15
ちなみに、1つのパソコンでも複数人遊べるのですが、スマホと連携するとさらに快適に遊べます。

方法は簡単で、クイズアプリを「プレビュー」する前に、表示されている「URL」にスマホでアクセスして、認証番号を入力するだけでPCとスマホが自動連動します。
quizshow_16

すると、スマホ画面には「早押しボタン」の代わりとなる「BUZZER」ボタンが表示されます。
quizshow_17 あとは、PCと同様に正解を選択していけばOKです!


まだあるこんな機能!
「quizshow」には、あらかじめ多彩な「クイズモード」が搭載されているのも魅力的な特徴となっています。
quizshow_18

例えば、3つのキーワードがランダムに表示される状態で、正解のキーワードが表示された瞬間に「早押しボタン」をすかさず叩く…というモード。
quizshow_19

あるキーワードをテーマにして、それと関連のあるキーワードを、誰よりも早く当てるモード。
quizshow_20

文章の「空欄」を、正しい選択肢から選んでいくモード。
quizshow_21

他にも、自作のスライドショーを挿入できる機能もあります。
quizshow_22 これを使えば、クイズのチュートリアルを作ったり、解説などを任意のタイミングで挿入できたりするので、アプリのクオリティをさらに高めることが可能です。

このように、本格的な「クイズゲーム」を誰でも簡単にWeb上へ公開することが可能になります。 作り方によっては、友人と遊ぶだけでなく、セミナーや講演などでにも応用できそうな気がします。


おまけ
最後に、もっと本格的なゲームをコーディング不要で作りたい!という人向けに、最適なサービスを合わせてご紹介しておきます!

コーディング不要のHTML5ゲームエンジン「WiMi5」は、課金実装も可能で全部無料!
quizshow_23 キー入力を処理するブロック、キャラクターを表示するブロック、画面を切り替えるブロック…など、さまざまな役割を持ったブロックを「線」で繋いでいくだけで本格的なWebアプリを作ることができるサービスとなっています。

こちらもWeb上に公開できますが、スマホ用アプリへ変換することも可能です。



ちなみに、
今回ご紹介した「quizshow」のように、クイズを答える感覚でプログラミングを学習できるというサービスもあります。

クイズに答えるだけで「プログラミングの勉強」ができるWebサービスたちにハマる!
quizshow_24 本格的なプログラミング学習に興味ある方は、ぜひ覗いてみてください。


まとめ
Web上で「クイズ」を作る…というサービスはいくつかあるのですが、「quizshow」は圧倒的に使いやすくクオリティも高いです。

まだβ版なので、これからさらに改良されて、もっと面白い機能が続々と追加されると思います。

ぜひ、みなさんも自分だけのクイズを作って、家族や友達と一緒に遊んでみましょう!



written by まさとらん



まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る