差分

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

--- ionic4での変更点 [2019/02/12] – [Ionic3からIonic4への変更点] adash333
+++ ionic4での変更点 [2020/03/28] (現在) – [Ionic4　メニュー] adash333
@@ 行 1: / 行 1: @@
 ====== Ionic3からIonic4への変更点 ======
- ---// 2019/02/12 更新//
+ ---// 2020/03/28 更新//
+[[https://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic5:01.ionic5%E3%81%A7%E3%81%AE%E5%A4%89%E6%9B%B4%E7%82%B9|Ionic5での変更点]]
 ===== Ionic4　メニュー =====
 <wrap hi>[[http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:index.html|スマホ用ホームページ&スマホアプリ作成ソフトIonic4]]</wrap>
-  -[[WindowsでIonic4を始める方法]]
+  -[[http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:01.windowsでionicを始める方法|windowsでionicを始める方法]]
-  -[[Ionic4での変更点]]
+  -[[http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:02.おすすめのionic入門書2019年版|おすすめのionic入門書2019年版]]
+  -[[http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:03.ionic4で計算アプリ|ionic4で計算アプリ]]
+  -[[http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:08.ionic4でタイマーアプリ|ionic4でタイマーアプリ]]
+  -[[http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:09.ionic4でpwa|Ionic4でPWA(Progressive Web Apps)]]
+  -[[Ionic4での変更点]]　←このページ
   -[[RxJS6(Ionic4-Angular6)での変更点]]
   -[[Ionic4とDialogflow(V1)でチャットボットアプリ]]
@@ 行 14: / 行 22: @@
   -[[Ionic4:Ionic4でルーティング|Ionic4でルーティング]]
   -[[Vue.jsでIonic4]]
+  -[[z_blog:2018:181018_ionic4_storage_crud|Ionic4でStorage利用でCRUDを写経してみる]]
+  -[[z_blog:2018:181020_ionic4_firestore_crud|Ionic4とFirestoreでCRUD]]
 Ionic3については<wrap hi>[[ionic4:index.html|こちら]]</wrap>をご覧下さい。
@@ 行 34: / 行 44: @@
 </code>
 と入力すれば、Ionic CLIがインストールされます。[[https://beta.ionicframework.com/docs/installation/cli|公式サイト]]
+===== Ionic3からIonic4への移行方法（英語） =====
+https://www.joshmorony.com/my-method-for-upgrading-from-ionic-3-to-ionic-4/
+→こちらのサイトがよいと思われます。
 ===== ionicアプリ作成コマンド"ionic start" =====
@@ 行 52: / 行 66: @@
 ===== フォルダ構造とファイル名が変更 =====
-pagesフォルダが無くなり、appフォルダ直下にページ用フォルダを作成
+ionic4では、pagesフォルダが無くなり、appフォルダ直下にページ用フォルダを作成するようになりました。
 例えば、<code>ionic g page contact</code>とすると、src/app/ フォルダの中に、contact/ フォルダが作成されます。さらに、contact/ フォルダの中に、以下の5個のファイルが作成されます。
@@ 行 76: / 行 90: @@
 </code>
+その他、'' expand="full" ''の使い方など、詳細は公式ドキュメントhttps://ionicframework.com/docs/api/button　のサンプルコードをご覧下さい。
 ===== routingが大幅変更 =====
@@ 行 101: / 行 116: @@
 https://www.joshmorony.com/understanding-how-slots-are-used-in-ionic-4/
-上記サイトによると、例えば、ページのヘッダーは、以下のように記載するとのことです。(ちなみに、ion-navbarではなく、ion-toolbarを用いる。)
+上記サイトによると、例えば、ページのヘッダーは、以下のように記載するとのことです。(ちなみに、ion-navbarではなく、ion-toolbarを用います。)
 <code html>
@@ 行 155: / 行 170: @@
 </code>
-まだ試していませんが以下の方法でPWA化できるらしいです。
+Ionic4デフォルトアプリをPWA化してFirebase Hostingにデプロイする過程を以下に記載しましたので、もしよろしければご覧下さい。
-https://qiita.com/kponda/items/b06d350cb616458d33cd
-{{:pasted:20181224-083726.png}}
-/8/1時点では、うまくいきませんでした。[[https://github.com/angular/angular-cli/issues/11640|参考外部リンク]]
+<wrap hi>[[http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:09.ionic4でpwa|Ionic4でPWA(Progressive Web Apps)]]</wrap>
-http://twosquirrel.mints.ne.jp/?p=26777
+また、Ionic4デフォルトアプリをPWA化して、Netlifyにデプロイする過程も以下に記載しました。
+<wrap hi>[[http://twosquirrel.mints.ne.jp/?p=28877|Ionic4アプリをでPWA（Progressive Web Apps）化してNetlifyにデプロイ]]</wrap>
-https://www.joshmorony.com/create-a-pwa-with-angular-service-workers-in-ionic-4/
-参考：https://ionicthemes.com/tutorials/about/the-complete-guide-to-progressive-web-apps-with-ionic4
-The Complete Guide To Progressive Web Apps with Ionic 4
-By Agustin Haller / updated on February 7, 2019
 ===== リンク =====