差分

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

--- z_blog:2018:181018_ionic4_storage_crud [2018/10/19] – [Note service の実装] adash333
+++ z_blog:2018:181018_ionic4_storage_crud [2019/02/14] (現在) – [NotesDetail Pageの実装] adash333
@@ 行 10: / 行 10: @@
 https://github.com/joshuamorony/ionic-notepad
 ===== 開発環境 =====
+<code>
+Windows 8.1 Pro
+VisualStudioCode
+git version 2.16.1.windows.4
+Node v8.12.0
+npm 6.4.1
+Ionic (Ionic CLI) 4.2.0
+Ionic Framework @ionic/angular 4.0.0-beta.13
+</code>
 ===== Ionic4アプリの作成 =====
@@ 行 69: / 行 80: @@
 {{:z_blog:2018:pasted:20181019-084035.png}}
-===== Note service の実装 =====
+===== Note service の実装と@inoic/storageのインストール =====
 （変更前）
@@ 行 78: / 行 89: @@
 ionic serve し直すと以下のようなエラー。
+@ionic/storage を利用するためには、@ionic/storageをnpm install --saveする必要があるとのこと。
 {{:z_blog:2018:pasted:20181019-175033.png}}
@@ 行 84: / 行 97: @@
 <code>
+npm install @ionic/storage --save
+</code>
+{{:z_blog:2018:pasted:20181019-180607.png}}
+ionic serve しておく。
+src/app/app.module.ts
+(変更前)
+{{:z_blog:2018:pasted:20181019-180912.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181019-181337.png}}
+===== HomePageの編集 =====
+src/app/home/home.page.ts
+(変更前)
+{{:z_blog:2018:pasted:20181019-181844.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181019-204535.png}}
+参考：https://beta.ionicframework.com/docs/api/alert/
+{{:z_blog:2018:pasted:20181019-205643.png}}
+src/app/home/home.page.html
+(変更前)
+{{:z_blog:2018:pasted:20181019-210028.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181019-211912.png}}
+{{:z_blog:2018:pasted:20181019-212337.png}}
+タイトルを入力して、「保存」をクリックしても、保存されなかったので、Chromeの画面で、Ctrl+Shift+I でconsoleの画面でエラーを見たら、home.page.htmlのタイプミスが判明して、直したところ、以下のようにちゃんとリストが表示された。
+{{:z_blog:2018:pasted:20181019-214751.png}}
+===== NotesDetail Pageの実装 =====
+src/app/detail/detail.page.ts
+なお、下の画面は、トップページにリスト表示されるノートのうち、一番上のタイトルをクリックした後のページとしています。
+アドレスは、http://localhost:8100/notes/1　となっています。
+(変更前)
+{{:z_blog:2018:pasted:20181019-215426.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181019-220415.png}}
+src/app/detail/detail.page.html
+(変更前)
+{{:z_blog:2018:pasted:20181019-220604.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181019-222959.png}}
+なぜか、リストの一部をクリックしても、Detailページに飛ばない。。。
+Ctrl+Shift+I でconsole画面を見てみると、どうやら、Detailページのhtmlにタイプミスがありそう。
+ここだったらしい。。。
+{{:z_blog:2018:pasted:20181019-223139.png}}
+<ion-textarea></ion-textarea>が、<ion-tetarea></ion-tetarea>になっていた。
+（VisualStudioCodeのテキスト補完を利用して写経しているので、最初をタイプミスすると、後半も自動的にタイプミスとなる。）
+直してみると、うまくいった。
+{{:z_blog:2018:pasted:20181019-224155.png}}
+書き込むだけで保存されるようである。
+しかし、4行目以上になると、変な風になってしまう。
+{{:z_blog:2018:pasted:20181019-224301.png}}
+これをなんとかするためには、detail.page.scss を以下のように変更する必要があるらしい。
+{{:z_blog:2018:pasted:20181019-225352.png}}
+今回は、これでよしとする。
+===== ソースコード =====
+https://github.com/adash333/ionic4-notepad
+===== Netlifyにデプロイしてスマホで確認 =====
+[[https://www.netlify.com/|Netlify]]にログインして、https://github.com/adash333/ionic4-notepadを選択して、以下の設定を行い、デプロイしたものを、自分のAndroidスマホで確認。
+<code>
+npm run build --prod
+www/
 </code>
+以下のように、なんとか、うまくいったようである。
+{{:z_blog:2018:pasted:20181019-232239.png}}