z_blog:2018:181018_ionic4_storage_crud

差分

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

この比較画面へのリンク

--- z_blog:2018:181018_ionic4_storage_crud [2018/10/19] – [HomePageの編集] 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アプリの作成 =====
@@ 行 124: / 行 135: @@
 {{: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}}

z_blog/2018/181018_ionic4_storage_crud.1539952524.txt.gz · 最終更新: 2018/10/19 by adash333