2014 年 08 月 18 日 最 終 更 新 クイズアプリをつくろう Dacoon, Inc.
目 次 1. APP STUDIO で 作 れるクイズについて... 3 2. クイズアプリを 作 ってみよう... 4 3. 画 像 の 設 定... 22 4. CSS 編 集 について... 25 5. パブリッシュについて... 27 2
1.App Studio で 作 れるクイズについて App Studio では 次 のような 6 種 類 のクイズを 作 る 事 が 出 来 ます [1] 択 一 クイズ 選 択 肢 の 中 から 答 えを 一 つ 選 ぶ 形 のクイズです [2] 複 数 選 択 クイズ 選 択 肢 の 中 から 答 えを 複 数 選 ぶ 形 のクイズです [3] 画 像 選 択 クイズ 4 つの 画 像 の 中 から 答 えを 一 つ 選 ぶ 形 のクイズです [4] 自 由 入 力 クイズ 文 字 数 を 指 定 して 単 語 を 答 えるクイズです [5] 年 号 クイズ 4 桁 の 数 字 を 入 力 して 答 えるクイズです [6] クイズ 問 題 に 対 して 正 しい 事 は 間 違 っている 事 は で 答 えるクイズです 3
2.クイズアプリを 作 ってみよう [1] App Studio アプリ 新 規 作 成 まず App Studio にログインします App Studio ログイン URL http://tool.apps.jp.net ログインすると 下 図 のような 画 面 が 表 示 されますので アプリの 新 規 作 成 ( 下 図 赤 枠 )をクリックします 4
すると これから 開 発 するクイズアプリの 詳 細 を 設 定 する 画 面 になります アプリ 名 の 所 にはアプリの 名 前 を このアプリについて の 所 は 開 発 する アプリについての 説 明 を 入 力 します あとで 変 更 可 能 です 次 に ヘッダーとフッターを 表 示 させるかを 選 択 し Web DAV URL を 貼 り 付 け 作 成 する をクリックします 5
スマートフォンで 確 認 すると このアプリについて の 部 分 は 下 図 のような 所 に 記 載 される 文 章 になります アプリについての 説 明 や 規 約 などを 記 載 しましょう ヘッダーとフッターについては 下 図 上 部 の 赤 枠 部 分 がヘッダーで 下 図 下 部 の 赤 枠 部 分 がフッターとなりますので 覚 えておきましょう 6
[2] App Studio クイズ 作 成 早 速 クイズを 追 加 していきましょう クイズ 追 加 ( 下 図 赤 枠 )をクリックして 下 さい 7
クイズタイトル の 所 はクイズのタイトルを 入 力 します 制 限 時 間 はクイズ を 答 えるまでの 制 限 時 間 ( 秒 )を 入 力 します 入 力 したら 作 成 する をクリックします 次 にクイズの 内 容 を 作 ってみましょう 8
(1) 択 一 クイズ 作 成 スマートフォンで 表 示 させると 下 図 のようなクイズです 択 一 クイズを 作 るには 択 一 ( 下 図 赤 枠 )をクリックします 9
次 に 問 題 文 と 答 えの 選 択 肢 を 入 力 したら 正 しい 答 えとなる 選 択 肢 の 所 にチェックを 入 れます ( 下 図 赤 丸 ) 解 説 の 所 は 入 力 しなくても 先 へ 進 めますが クイズの 答 えなどを 入 力 しても 良 いでしょう 問 題 追 加 ( 上 図 赤 い 矢 印 )をクリックすると 択 一 クイズが 出 来 上 がります 10
(2) 画 像 選 択 クイズ スマートフォンで 表 示 させると 下 図 のようなクイズです 画 像 選 択 クイズを 作 るには 画 像 選 択 ( 下 図 赤 枠 )をクリックします 11
問 題 文 を 入 力 したら ファイルを 選 択 より 画 像 をアップロード 出 来 ます 正 解 を 選 択 し 問 題 追 加 ( 下 図 赤 い 矢 印 )をクリックすると 画 像 選 択 クイズ が 出 来 上 がります 12
(3) 自 由 入 力 クイズ スマートフォンで 表 示 させると 下 図 のようなクイズです 自 由 入 力 クイズを 作 るには 自 由 入 力 ( 下 図 赤 枠 )をクリックします 13
問 題 文 と 正 解 を 入 力 します 正 解 に 書 いてある 言 葉 がそのまま 答 えになりますので ひらがな 文 字 で 答 え なさい などの 文 言 を 問 題 文 の 中 に 入 れましょう 解 説 を 入 力 し 問 題 追 加 ( 下 図 赤 い 矢 印 )をクリックすると 自 由 入 力 ク イズが 出 来 上 がります 14
(4) クイズ スマートフォンで 表 示 させると 下 図 のようなクイズです クイズを 作 るには ( 下 図 赤 枠 )をクリックします 15
次 に 問 題 文 を 入 力 します 正 解 は か を 選 択 し 問 題 追 加 ( 下 図 赤 い 矢 印 )をクリックすると クイズが 出 来 上 がります 16
(5) 複 数 選 択 クイズ スマートフォンで 表 示 させると 下 図 のようなクイズです 複 数 選 択 クイズを 作 るには 複 数 選 択 ( 下 図 赤 枠 )をクリックします 17
問 題 文 と 選 択 肢 を 入 力 したら 正 解 を 選 択 し 問 題 追 加 ( 下 図 赤 い 矢 印 )をクリックすると 複 数 選 択 クイズが 出 来 上 がります 18
(6) 年 号 クイズ スマートフォンで 表 示 させると 下 図 のようなクイズです 次 は 年 号 クイズを 追 加 しますので 年 号 ( 下 図 赤 丸 )をクリックします 19
問 題 文 正 解 を 入 力 します 問 題 追 加 をクリックすると 年 号 クイズが 出 来 上 がります 20
上 部 の 表 示 でどの 編 集 画 面 を 見 ているのかが 解 ります ( 下 図 赤 枠 ) この 編 集 画 面 では 並 び 替 え の 所 の 上 下 矢 印 で 問 題 を 並 び 替 える 事 が 出 来 ま す 操 作 の 所 では 問 題 や 選 択 肢 がどのように 表 示 されるか プレビュー を クリックすると 確 認 出 来 ます 編 集 からは 問 題 や 答 えなどの 編 集 ができ 削 除 をクリックすると 問 題 を 削 除 出 来 ます 21
3. 画 像 の 設 定 背 景 画 像 を 設 定 してみましょう まず 画 像 アップロード ( 下 図 赤 枠 )をクリックします 下 図 のような 画 面 が 表 示 されます ファイルを 選 択 をクリックし 画 像 を 選 択 したら 決 定 ( 下 図 赤 丸 )をクリ ックします 22
スマートフォンで 見 ると メイン 画 像 は 赤 い 部 分 ホーム 画 面 背 景 画 像 は 黄 色 の 部 分 ホームボタン 画 像 はピンクの 部 分 です 下 図 をご 確 認 下 さい ホーム 画 面 背 景 画 像 は デフォルトで 木 目 画 像 が 設 定 されています ホームボタン 画 像 については ホームボタンの 画 像 を 設 定 すると 文 字 が 自 動 的 にクリーム 色 に 設 定 されます 下 図 のような 色 です この 文 字 色 を 変 更 したい 場 合 は 4.CSS 編 集 について をお 読 み 下 さい 23
画 像 を 編 集 する 際 は 再 度 画 像 アップロード をクリックすると 下 図 のよう な 画 面 が 表 示 されますので 画 像 を 変 更 したい 際 は また ファイルを 選 択 か らアップロードして 下 さい 画 像 を 削 除 する 際 は 画 像 を 削 除 ( 下 図 赤 枠 )にチェックを 入 れて 下 さい 編 集 が 終 わったら 決 定 をクリックして 下 さい ホームボタン 画 像 は 1080 180 の 画 像 サイズがお 勧 めです 他 の 画 像 サイ ズについては 自 然 に 画 面 サイズに 合 わせるようにシステムが 調 節 していますが スマートフォンの 画 面 サイズに 合 わせて 作 成 されるのがお 勧 めです 24
4.CSS 編 集 について スタイルシートなどの 知 識 がある 方 は CSS 編 集 ( 下 図 赤 枠 )より 細 かいデザ インを 変 更 出 来 るようになっております 編 集 する 際 は デフォルト CSS を 読 み 込 む ( 下 図 赤 枠 )をクリックして デフ ォルトの CSS を 読 み 込 み 編 集 します 編 集 が 完 了 したら 決 定 ( 下 図 赤 い 矢 印 )をクリックしましょう 25
ボタンの 文 字 色 を 変 更 する 場 合 読 み 込 んだ CSS の div.home-link のスタイルを 変 更 します 下 図 の 赤 枠 内 の 部 分 がボタンの 文 字 色 を 設 定 している 部 分 です 画 像 の Color: #F5DEB3; この 部 分 で 文 字 色 を #F5DEB3 (クリーム 色 )に 設 定 しています 例 えば #F5DEB3 を #FF0000 に 変 更 すると 文 字 の 色 が 赤 くなり #FFFFFF で 白 #000000 で 文 字 色 が 黒 になります #F5DEB3 や#FF0000 などの 色 を 表 すコードは HTML カラーコードといって 色 を 16 進 数 で 表 すコードです その 他 の 色 を 設 定 したい 場 合 は 下 記 のようなサイトから 気 に 入 ったカラーコ ードを 見 つけて 設 定 して 下 さい http://www.colordic.org 26
5.パブリッシュについて 編 集 が 完 了 したら パブリッシュ という 作 業 をして Monaca の 方 に 反 映 させ ます この 作 業 をする 事 で スマートフォンから 開 発 したアプリの 動 作 を 確 認 出 来 ます 編 集 をしたら 忘 れずに パブリッシュ しましょう アプリ 情 報 の 画 面 で パ ブ リ ッ シ ュ ( 下 図 赤 枠 ) を ク リ ッ ク し ま す 27
次 に Monaca のログイン ID とパスワード( 下 図 赤 枠 )を 確 認 し パブリッシ ュ ( 下 図 赤 い 矢 印 )をクリックします 少 し 待 つと アップロードが 正 常 に 完 了 しました と 表 示 が 出 現 します これでスマートフォンから Monaca アプリを 開 くと 作 ったアプリを 確 認 出 来 る ようになります クイズの 内 容 を 更 新 する 度 に パブリッシュを 行 って 下 さい 28