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

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


00.ionic4:01.windowsでionicを始める方法


差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
00.ionic4:01.windowsでionicを始める方法 [2019/02/10] – [GitHubにアップロード] adash33300.ionic4:01.windowsでionicを始める方法 [2019/02/12] (現在) – [オプション:nvm-windowsでNode.jsのバージョン管理] adash333
行 20: 行 20:
  
 DEMO DEMO
 +https://wizardly-bassi-9cce21.netlify.com/ 
 +{{:00.ionic4:pasted:20190210-135529.png}}
  
  
行 159: 行 160:
  
 ===== Netlifyにデプロイ ===== ===== 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年版]] 次:[[00.ionic4:02.おすすめのionic入門書2019年版|おすすめのIonic入門書2019年版]]


00.ionic4/01.windowsでionicを始める方法.1549804049.txt.gz · 最終更新: 2019/02/10 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki