差分

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

--- z_blog:2018:181109_ionic4_quiz [2018/11/09] – [Quiz Pageの作成（HomePage）] 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\\
@@ 行 94: / 行 94: @@
 (変更後)
+{{:z_blog:2018:pasted:20181110-005928.png}}
@@ 行 108: / 行 108: @@
 </code>
+(変更前)
+{{:z_blog:2018:pasted:20181110-005954.png}}
+うまくいかない。。。<app-flash-card> に変更。
+src/app/app.module.ts　から、FlashCardComponentを削除して、src/app/home/home.module.ts にFlashCardComponentを記載したら、なんとかhome.page.html内に、FlashCardコンポーネントが表示された。（Ionic3とIonic4で異なるところであった。）
+{{:z_blog:2018:pasted:20181110-095531.png}}
+home.page.scss
+{{:z_blog:2018:pasted:20181110-125825.png}}
+Ionic4では、<ion-slides><ion-slide></ion-slide></ion-slides>を用いる場合、<ion-slide>の中身が複数行に及ぶ場合は、scssファイルに、以下のように記述する必要がある。（Ionic3のときはそんな必要なかったのに。。。）
+参考：[[https://github.com/ionic-team/ionic/issues/14532|Ionic4でion-slideを用いるときの注意点]]
+<code>
+//home.page.htmlでion-slideを使用する場合は、
+//home.page.scssで、以下のように記載する。
+ion-slide {
+  display: block
+}
+</code>
+===== ここまでのソースコード =====
+https://github.com/adash333/ionic4-kids-quiz/tree/8608b6bcf496a408697851b5ab73a1ded1b571ca
+引き続き、以下のサイトを写経していく。
+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ファイルを作成する。
+src/assets/ フォルダの中に、data/　フォルダを作成し、さらに、questions.jsonファイルを作成する。
+{{:z_blog:2018:pasted:20181110-171128.png}}
+こちらに絵へのリンクや、正解を”correct”キーで、true or false で設定したりしている。
+画像はアプリ（フロントエンド）に保存しておき、JSONファイルだけ、firebaseに置いておくといったやり方もありそう。
+==== JSON形式とは？ ====
+JSON(JavaScript Object Notation)は、「データを表現するための記法」の一つであり、Webアプリ（やスマホアプリ）と、サーバが通信する際に、JSON形式のデータをやり取りを行う場合が多いです。（JSONデータ自体はテキストファイルですので、その中に画像ファイルなどを入れることはできません。）
+===== 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
 ===== リンク =====