サルでもわかるWEBプログラミング

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 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だけで対話的に始められるようになった
  -デフォルトのまま作成すると、『自分のパソコンやChromeをdarkモードに設定している人には』全体的に黒い画面になる
  -Netlifyへのデプロイコマンドの変更とその他のポイント
  -"ion-header"と"ion-content"の挙動もIonic4までと異なる？
  -[transluscent]="true"とか、[fullscreen]="true"の出現？
  -
===== 最初の環境構築でnpm install -g @ionic/cli native-run cordova-res　が必要 =====

Windowsの場合、Git, Node.jsのインストール後、以下のコマンドでインストールします。 @ionic/cliだけでなく、native-runとcordova-resも最初に一緒にインストールしておいた方がよいと思われます。

<code>
npm install -g @ionic/cli native-run cordova-res
</code>

参考：https://ionicframework.com/jp/docs/angular/your-first-app
{{:00.ionic5:pasted:20200328-094645.png}}

===== アプリ作成時にionic startだけで対話的に始められる =====
Ionic+Angular, Ionic+Reactの組み合わせなど、いろいろ増えてきたことから、ionic startコマンドが、対話的にできるようになっています。
新規アプリ作成時は、
<code>
ionic start
</code>
だけ入力して、後は聞かれたことにこたえていくのがよいと思われます。

なお、新規アプリ作成に5分くらいかかり、また、アプリ全体の大きさはデフォルトでも約500MBもあります。
===== デフォルトのまま作成すると、『自分のパソコンやChromeをdarkモードに設定している人には』全体的に黒い画面になる =====
Ionic4までは、自分のパソコンやChromeを『darkモード』にしている人にもデフォルトの画面は白い画面でしたが、Ionic5以降は、darkモードの人には黒い画面になります。

ionic startの後、以下のように選びます。
<code>
? Framework: Angular
? Project name: ionic5-angular-blank
? Starter template: blank
? Integrate your new app with Capacitor to target native iOS and Android? No
</code>
{{:00.ionic5:pasted:20200328-095849.png}}
さらに、
<code>
cd ionic5-angular-blank
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へのデプロイコマンドの変更とその他のポイント =====
2020/3/28時点で、デフォルトアプリのNetlifyへのデプロイのコマンドは、以下のようになります。

Build Commandは、
<code>
npm run build -- --prod && echo '/* /index.html 200' >> www/_redirects
</code>
public directoryは、 
<code>
www/
</code>
{{:00.ionic5:pasted:20200328-100801.png}}

2020/3/28時点だと、さらに、package.json　を1か所変更して、さらにゴニョゴニョする必要があります。
ですが、これらは、いずれ、改善されると予想されます。

https://forum.ionicframework.com/t/could-not-find-plugin-proposal-numeric-separator/185556/20 　
{{:00.ionic5:pasted:20200328-101031.png}}

package.json

<code>
"dependencies": { 
}
の中に、
@babel/compat-data": "7.8.0"
を追加
</code>
その後、
<code>
npm install

git add .
git commit -m "@babel/compat-data"
git push
</code>

私の場合（@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フレームワークを紹介！
榊原昌彦
2020/02/16 02:54



===== Ionic5のチュートリアルのリンク =====

https://ionicframework.com/jp/docs/angular/your-first-app
{{:00.ionic5:pasted:20200328-103318.png}}
























===== Ionic5でおすすめの本 =====
<html>
<a href="https://www.amazon.co.jp/dp/B081ZN64FM/ref=as_li_ss_il?_encoding=UTF8&btkr=1&linkCode=li3&tag=i-doctor-22&linkId=1613fb75be551044d7643ba52b0f1af4&language=ja_JP" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B081ZN64FM&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=i-doctor-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=i-doctor-22&language=ja_JP&l=li3&o=9&a=B081ZN64FM" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
</html>


===== リンク =====
[[https://i-doctor.sakura.ne.jp/font/?p=42750|Windows10でIonic5（Angular）の環境構築とNetlifyで公開]]

次：

目次：[[00.ionic5:index.html|スマホ用ホームページ&スマホアプリ作成用フレームワークIonic5]]