差分

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

--- 00.ionic4:01.windowsでionicを始める方法 [2019/02/10] – [WindowsにIonic4をインストールする流れ] adash333
+++ 00.ionic4:01.windowsでionicを始める方法 [2019/02/12] (現在) – [オプション：nvm-windowsでNode.jsのバージョン管理] adash333
@@ 行 12: / 行 12: @@
 <iframe width="560" height="315" src="https://www.youtube.com/embed/H1HxPFdKDSw" frameborder="0" allowfullscreen></iframe>
 </html>
+===== すること =====
+  *Ionic4アプリを作成し、GitHub経由でNetlifyにデプロイして公開する
+ソースコード
+https://github.com/adash333/ionic4-tabs
+DEMO
+https://wizardly-bassi-9cce21.netlify.com/
+{{:00.ionic4:pasted:20190210-135529.png}}
 ===== 開発環境 =====
+<code>
 Windows 8.1 Pro
+Git for Windows
+</code>
+Git for Windowsのインストールについては、https://qiita.com/elu_jaune/items/280b4773a3a66c7956fe　の通りに行いました。
 今回構築した環境
@@ 行 122: / 行 137: @@
 なお、この時点で、405MBもの大きさがあります。1個で0.5GBとは、10個アプリを作ると5GBですから、作成中であないアプリはGitHubやBitBucketにアップロードするなどして、ディスク容量に気をつけないといけないと感じました。
-===== androidアプリの作成 =====
+===== GitHubにアップロード =====
+GitHubアカウントは持っているものとします。GitHubアカウントの作成方法については、[[:index.html|このサイトについて]]をご覧ください。
+  *https://github.com/に行き、ログインしたのち、画面右上の『+』をクリック　＞　『New Repository』をクリック
+{{:00.ionic4:pasted:20190210-122452.png}}
+  *Repository nameのところに、ionic4-tabs　と入力し、Create repositoryをクリック
+{{:00.ionic4:pasted:20190210-122626.png}}
+  *以下のような画面になります。
+{{:00.ionic4:pasted:20190210-122816.png}}
+  *その中でも、この後、以下のコードの一部を利用します。
+{{:00.ionic4:pasted:20190210-123933.png}}
+  *ローカルパソコンのVisualStudioCodeのターミナル画面に戻り、以下を入力します。（https://github.com/...のところは、上記画面のご自身用のコードをコピペしてください。）
 <code>
-ionic cordova platform add android
+git add .
-ionic cordova build android
+git remote add origin https://github.com/adash333/ionic4-tabs.git
+git push -u origin master
 </code>
-もし、「? The plugin @ionic/cli-plugin-cordova is not installed. Would you like to inst
+{{:00.ionic4:pasted:20190210-123843.png}}
-all it and continue?」と聞かれたら、Yesとしておきます。
+  *GitHubの画面を更新すると、以下のようになります。
+{{:00.ionic4:pasted:20190210-124033.png}}
-{{:pasted:20170609-010352.png}}
+===== 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/
-{{:pasted:20170609-010624.png}}
+以上となります。
-だいぶ時間がかかります。
+===== ソースコード =====
+https://github.com/adash333/ionic4-tabs
-{{:pasted:20170609-010755.png}}
+DEMO
+https://wizardly-bassi-9cce21.netlify.com/
-{{:pasted:20170609-010949.png}}
+===== オプション：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}}
-指定されたフォルダを開いて、android-debug.apkというファイル（約4MB）を、自分のスマホにメールして、インストールします。なお、スマホの設定については、[[http://qiita.com/knakamigawa/items/5b8bd2793920b517bf25|こちらのリンク]]をご覧ください。
+  *以下のリンクから、最新版の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年版]]