差分

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

--- 00.ionic5:01.ionic5での変更点 [2020/03/28] – [デフォルトのまま作成すると、全体的に黒い画面になる] adash333
+++ 00.ionic5:01.ionic5での変更点 [2020/04/02] (現在) – [“ion-header”と“ion-content”の挙動もIonic4までと異なる？] adash333
@@ 行 1: / 行 1: @@
 ====== 01. Ionic5での変更点 ======
+ ---//2020/03/28 更新//
 目次：[[00.ionic5:index.html|スマホ用ホームページ&スマホアプリ作成用フレームワークIonic5]]
+Ionic4からIonic5への変更点は、公式ブログhttps://ionicframework.com/blog/announcing-ionic-5/に記載されていますが、個人的に特に気になったところを記載させていただきたいと思います。
+{{:00.ionic5:pasted:20200328-111230.png}}
   -最初の環境構築でnpm install -g @ionic/cli native-run cordova-res　が必要
   -アプリ作成時にionic startだけで対話的に始められるようになった
-  -デフォルトのまま作成すると、全体的に黒い画面になる（Ionic4までは白い画面だった）
+  -デフォルトのまま作成すると、『自分のパソコンやChromeをdarkモードに設定している人には』全体的に黒い画面になる
   -Netlifyへのデプロイコマンドの変更とその他のポイント
+  -"ion-header"と"ion-content"の挙動もIonic4までと異なる？
+  -[transluscent]="true"とか、[fullscreen]="true"の出現？
   -
 ===== 最初の環境構築でnpm install -g @ionic/cli native-run cordova-res　が必要 =====
@@ 行 28: / 行 34: @@
 なお、新規アプリ作成に5分くらいかかり、また、アプリ全体の大きさはデフォルトでも約500MBもあります。
-===== デフォルトのまま作成すると、全体的に黒い画面になる =====
+===== デフォルトのまま作成すると、『自分のパソコンやChromeをdarkモードに設定している人には』全体的に黒い画面になる =====
-Ionic4までは、デフォルトの画面は白い画面でしたが、なぜか、真っ黒になりました。
+Ionic4までは、自分のパソコンやChromeを『darkモード』にしている人にもデフォルトの画面は白い画面でしたが、Ionic5以降は、darkモードの人には黒い画面になります。
 ionic startの後、以下のように選びます。
@@ 行 44: / 行 50: @@
 ionic serve
 </code>
-すると、以下のような真っ黒な画面が出てきます。
+すると、以下のような真っ黒な画面が出てきます。（私は、Windows10の設定でdarkモードに設定しているので、黒い画面になります。darkモードでも、Ionic4までは真っ白な画面でした。特にパソコンをdarkモードにしていない人には、今まで通り、白い画面で見えます。）
+{{:00.ionic5:pasted:20200328-101600.png}}
+参考：[[https://www.atmarkit.co.jp/ait/articles/1912/19/news028.html|Chromeを「ダークモード」に切り替えて省電力や眼の負担軽減（Windows／Mac編） 2019年12月19日]]
 ===== Netlifyへのデプロイコマンドの変更とその他のポイント =====
@@ 行 56: / 行 63: @@
 npm run build -- --prod && echo '/* /index.html 200' >> www/_redirects
 </code>
-public directoryは、 www/
+public directoryは、
+<code>
+www/
+</code>
 {{:00.ionic5:pasted:20200328-100801.png}}
-/3/28時点だと、さらに、package.json　を2か所変更して、さらにゴニョゴニョする必要があります。
+/3/28時点だと、さらに、package.json　を1か所変更して、さらにゴニョゴニョする必要があります。
 ですが、これらは、いずれ、改善されると予想されます。
-https://forum.ionicframework.com/t/how-to-resolve-babel-error-when-installing-geolocation-in-ionic-app/185542/2
-{{:00.ionic5:pasted:20200328-101001.png}}
 https://forum.ionicframework.com/t/could-not-find-plugin-proposal-numeric-separator/185556/20
@@ 行 75: / 行 82: @@
 の中に、
 @babel/compat-data": "7.8.0"
-を追加
-"resolutions": {
-  "@babel/preset-env": "7.5.5"
-}
 を追加
 </code>
 その後、
 <code>
-npm install npm-force-resolutions --save-dev
-npm install
-npx npm-force-resolutions
 npm install
+git add .
+git commit -m "@babel/compat-data"
+git push
 </code>
-私の場合（）は、これで、ようやくNetlifyにデプロイすることができるようになりました。
+私の場合（@ionic/angular 5.0.7）は、これで、ようやくNetlifyにデプロイすることができるようになりました。
+===== “ion-header”と“ion-content”の挙動もIonic4までと異なる？ =====
+ionic startコマンドで、上記のように、
+Starter templateでblankを選択してアプリを作成すると、
+は以下のように、ion-headerが2箇所も記載されています。
+<code>
+test
+</code>
+===== Ionic5の変更点に関するリンク =====
+https://note.com/rdlabo/n/n321f3d0c9b68
+[翻訳]Ionic5がやってきた。Gifアニメーションつきで最新のWebモバイルUIフレームワークを紹介！
+榊原昌彦
+/02/16 02:54
+===== Ionic5のチュートリアルのリンク =====
+https://ionicframework.com/jp/docs/angular/your-first-app
+{{:00.ionic5:pasted:20200328-103318.png}}