差分

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

--- 00.ionic4:01.windowsでionicを始める方法 [2019/02/10] – [GitHubにアップロード] adash333
+++ 00.ionic4:01.windowsでionicを始める方法 [2019/02/12] (現在) – [オプション：nvm-windowsでNode.jsのバージョン管理] adash333
@@ 行 20: / 行 20: @@
 DEMO
+https://wizardly-bassi-9cce21.netlify.com/
+{{:00.ionic4:pasted:20190210-135529.png}}
@@ 行 159: / 行 160: @@
 ===== Netlifyにデプロイ =====
+  *https://www.netlify.com/ へ行き、GitHubアカウントでログインします。
+{{:00.ionic4:pasted:20190210-133227.png}}
+  *画面右上の『New site from Git』をクリック
+{{:00.ionic4:pasted:20190210-133303.png}}
+  *GitHub をクリック
+{{:00.ionic4:pasted:20190210-133333.png}}
+  *Authorized の画面が出てから、以下のような画面に切り替わるので、今回は、"ionic4-tabs"をクリック
+{{:00.ionic4:pasted:20190210-133448.png}}
+{{:00.ionic4:pasted:20190210-133531.png}}
+  *以下のように、''%%npm run build
+--prod%%''と''%%www/%%''と入力して、Deploy site をクリックします
+{{:00.ionic4:pasted:20190210-135015.png}}
+  *次の画面で何分か待つと、うまくいくと、デプロイが完了して、リンクが表示されるので、画面上の方のリンクをクリック
+{{:00.ionic4:pasted:20190210-135115.png}}
+  *すると、無事、サイトが公開されます。このサイトは、自分のスマホなどでもアクセスすることができます。
+{{:00.ionic4:pasted:20190210-135232.png}}
+https://wizardly-bassi-9cce21.netlify.com/
+以上となります。
+===== ソースコード =====
+https://github.com/adash333/ionic4-tabs
+DEMO
+https://wizardly-bassi-9cce21.netlify.com/
+===== オプション：nvm-windowsでNode.jsのバージョン管理 =====
+Node.jsもバージョンアップが繰り返されますが、npmが複数存在していると、''%%npm update npm%%''をしても、バージョンアップがうまくいかないことがあります。そのため、私は、nvm-windowsというNodejsのバージョン管理システムを用いています。
+参考：https://mosapride.com/index.php/2018/04/23/post-810/
+{{:00.ionic4:pasted:20190211-091521.png}}
+  *以下のリンクから、最新版のnvm-setup.zipをダウンロード
+https://github.com/coreybutler/nvm-windows/releases
+{{:00.ionic4:pasted:20190211-092144.png}}
+  *解凍して、中身のexeファイルをダブルクリックして起動し、指示に従ってインストール。
+{{:00.ionic4:pasted:20190211-092227.png}}
+  *念のため、Windowsを再起動
+  *VisualStudioCode（コマンドプロンプトでもOK）で適当なフォルダを開き、Ctrl+@でコマンドプロンプトを起動。(WSLなどに変更している場合は、''%%Ctrl+Shift+P%%''で''shell''と入力し、defaultをcmd.exeにしておく)
+<code>
+nvm -v
+nvm list available
+</code>
+{{:00.ionic4:pasted:20190211-093712.png}}
+{{:00.ionic4:pasted:20190211-093840.png}}
+  *LTS(Long Term Support＝安定版)のうち、一番新しいバージョンを指定してインストールします
+<code>
+nvm install 10.15.1
+nvm use 10.15.1
+</code>
+{{:00.ionic4:pasted:20190211-094225.png}}
+上記の操作により、Windows10に、Node.js 10.15.1をインストールしたことと同じことになりました。
+ここに、yarn, ionic, cordovaをインストールしておきます。
+<code>
+npm install -g yarn
+npm install -g ionic cordova
+</code>
+{{:00.ionic4:pasted:20190211-104328.png}}
+今回構築した環境
+<code>
+Windows10
+nvm-windows 1.1.7
+Node 10.15.1
+npm 6.4.1
+yarn 1.13.0
+ionic@4.10.2
+cordova@8.1.2
+</code>
 ===== リンク =====
-目次：[[00.ionic4:index.html|スマホ用ホームページ&amp;スマホアプリ作成ソフトIonic4]]
+目次：[[00.ionic4:index.html|スマホ用ホームページ&スマホアプリ作成ソフトIonic4]]
-前：[[00.ionic4:index.html|スマホ用ホームページ&amp;スマホアプリ作成ソフトIonic4]]
+前：[[00.ionic4:index.html|スマホ用ホームページ&スマホアプリ作成ソフトIonic4]]
 次：[[00.ionic4:02.おすすめのionic入門書2019年版|おすすめのIonic入門書2019年版]]