z_blog:2018:181109_ionic4_quiz

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- z_blog:2018:181109_ionic4_quiz [2018/11/10] – [クイズデータ用JSONファイルの作成] adash333
+++ z_blog:2018:181109_ionic4_quiz [2018/11/10] (現在) – [クイズテンプレートの修正] adash333
@@ 行 1: / 行 1: @@
-====== 181109 Ionic4でクイズアプリにtry ======
+====== 181109 Ionic4でクイズアプリ（１） ======
 http://twosquirrel.mints.ne.jp/?p=24938\\
@@ 行 142: / 行 142: @@
 https://www.joshmorony.com/create-a-data-driven-quiz-app-in-ionic-2-part-2/
+以前、Ionic3で写経した経過は、以下に記載した。
+http://twosquirrel.mints.ne.jp/?p=25010
 ===== クイズデータ用JSONファイルの作成 =====
 複数のクイズを出題するために、JSONファイルを作成する。
@@ 行 158: / 行 161: @@
 ===== Data Serviceの作成 =====
+src/assets/data/questions.json からデータを取り込み、Ionic（Angular）が使いやすい形（オブジェクト？）に変形します。
+@angular/common/http と、rxjs を用います。
+Angular4.3(ionic3の途中)から、httpの使い方が変更になっているので、注意が必要です。
+Angular5から、Angular6になるにあたり、RxJSも、RxJS5から、RxJS6になり、大幅な変更があります。
+参考：[[https://qiita.com/MasanobuAkiba/items/a5026bd37603cc29e9e7|Angular6 から始める RxJS6 入門]]
+src/app/services/data.service.ts
+(変更前)
+{{:z_blog:2018:pasted:20181110-174113.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181110-175502.png}}
+src/app/app.module.ts　に、HttpClientModule　をimportする。
+(変更後)
+{{:z_blog:2018:pasted:20181110-181504.png}}
+===== クイズのロジックを追加 =====
+home.ts に以下の事項を追加します。
+１．question dataのfetch
+２．answersのランダマイズ
+３．どの選択肢を選択したかをhandleし、次のクイズへ異動するロジック
+４．スコアの保管
+５．クイズをリスタートするボタン
+src/app/home/home.page.ts
+(変更前)
+{{:z_blog:2018:pasted:20181110-181635.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181110-182240.png}}
+{{:z_blog:2018:pasted:20181110-182303.png}}
+{{:z_blog:2018:pasted:20181110-182332.png}}
+なお、Ionic3での<wrap hi>ionViewDidLoad()</wrap>は、Ionic4では<wrap hi>ngOnInit()</wrap>に変更になっています。
+===== クイズテンプレートの修正 =====
+src/app/home/home.page.html
+(変更前)
+{{:z_blog:2018:pasted:20181110-182701.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181110-183805.png}}
+以下のように、なんとかクイズアプリが出来上がった。
+{{:z_blog:2018:pasted:20181110-183958.png}}
+参考：https://beta.ionicframework.com/docs/api/button/#expand
+===== ここまでのソースコード =====
+CSSはさっぱり分からないが、とりあえず、ここまでのソースコード
+https://github.com/adash333/ionic4-kids-quiz/tree/8893d9261411e06991406d33093c820c5512cb94
 ===== リンク =====

z_blog/2018/181109_ionic4_quiz.1541838210.txt.gz · 最終更新: 2018/11/10 by adash333