====== WindowsでIonicを始める方法 ====== ---//2019/02/10 更新// ころころVersionが変わるので、注意が必要です。 2019年2月時点での、インストール方法を記載させていただきます。 Ionicをインストールするためには、Node.js 6以上が必要ですので、以下の順番でインストールを行います。今回は、エディタとして、筆者の趣味で、VisualStudioCodeも一緒にインストールします。以下の画面は、Windows 8.1 Proの画面ですが、Windows7やWindows10でもほぼ同じです。 Ionic3のときのものですが、このページを動画にまとめてみました（約6分）。 ===== すること ===== *Ionic4アプリを作成し、GitHub経由でNetlifyにデプロイして公開する ソースコード https://github.com/adash333/ionic4-tabs DEMO https://wizardly-bassi-9cce21.netlify.com/ {{:00.ionic4:pasted:20190210-135529.png}} ===== 開発環境 ===== Windows 8.1 Pro Git for Windows Git for Windowsのインストールについては、https://qiita.com/elu_jaune/items/280b4773a3a66c7956fe　の通りに行いました。 今回構築した環境 node v10.14.2 ionic-CLI 4.10.2 cordova 8.1.2 (cordova-lib@8.1.1) ===== WindowsにIonic4をインストールする流れ ===== -Node.jsのインストール -VisualStudioCodeのインストール -Ionicとcordovaのインストール -ionic4でHello world!する。（アプリの作成） -GitHubにアップロード -GitHub経由でNetlifyにデプロイ ===== Node.jsのインストール ===== https://nodejs.org/ja/ {{:00.ionic4:pasted:20190210-083328.png}} 上記のv10.15.1 LTS をクリックしてダウンロード（約16.5MB）。ダウンロードしたファイル（node-v10.15.1-x64.msi）をダブルクリックして、指示に従ってインストールします。 {{:pasted:20170608-223845.png}} 途中、許可を求められたら、「許可する」をクリックします。 {{:pasted:20170608-224541.png}} ===== VisualStudioCodeのインストール ===== https://code.visualstudio.com/download {{:00.ionic4:pasted:20190210-091117.png}} 上記のWindows をクリックしてダウンロード（約46.7MB）。ダウンロードしたファイル（VSCodeUserSetup-x64-1.31.0.exe）をダブルクリックして、指示に従ってインストールします。 {{:00.ionic4:pasted:20190210-091628.png}} ===== Ionicとcordovaのインストール ===== 今回は、C:\ドライブ直下にionicという名前のフォルダを作成し、その中に、ionicアプリを作成していくこととします。 {{:00.ionic4:pasted:20190210-091811.png}} C:\ionic\ フォルダの中で、右クリックで、「Open with code」をクリックすると、VisualStudioCodeが起動して、以下のような画面になります。 {{:00.ionic4:pasted:20190210-091826.png}} Ctrl＋@　を押すと、右下の方にcmd.exeが出てきます。 {{:00.ionic4:pasted:20190210-093935.png}} このcmd.exeの画面で、 npm install -g ionic cordova と入力して、Enter. {{:00.ionic4:pasted:20190210-094010.png}} かなり長い時間待ちますが、我慢です。インストールが終了した後、 ionic -v と入力して、Enterすると、以下のようにionic-cliがインストールされたことが分かります。 {{:00.ionic4:pasted:20190210-094531.png}} ===== Ionic4でHello world!する。（アプリの作成） ===== ターミナル画面で以下を入力します。 ionic start myApp {{:00.ionic4:pasted:20190210-100741.png}} 矢印キーで一番下の、tabs を選択した状態にしてから、Enterを押すと、以下のような画面になります。 {{:00.ionic4:pasted:20190210-100830.png}} {{:00.ionic4:pasted:20190210-103753.png}} ? Link this app to your Ionic Dashboard to use tools like Ionic View? と聞かれても、とりあえず、n + Enterを押しておきます。 {{:00.ionic4:pasted:20190210-104450.png}} 作成したアプリの起動を行います。 cd myApp ionic serve とすると、以下のように表示されて、 {{:00.ionic4:pasted:20190210-104520.png}} その後、自動的にブラウザが開いて、以下のような画面が表示されます。 {{:00.ionic4:pasted:20190210-120200.png}} これであなたもIonic4デビューです！ なお、サーバを停止するときは、VisualStudioCodeのcmd.exeの画面で、Ctrl+Cを押して、Y+Enterを押すと、サーバを停止することができます。 なお、この時点で、405MBもの大きさがあります。1個で0.5GBとは、10個アプリを作ると5GBですから、作成中であないアプリはGitHubやBitBucketにアップロードするなどして、ディスク容量に気をつけないといけないと感じました。 ===== 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/...のところは、上記画面のご自身用のコードをコピペしてください。） git add . git remote add origin https://github.com/adash333/ionic4-tabs.git git push -u origin master {{:00.ionic4:pasted:20190210-123843.png}} *GitHubの画面を更新すると、以下のようになります。 {{:00.ionic4:pasted:20190210-124033.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/ 以上となります。 ===== ソースコード ===== 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にしておく) nvm -v nvm list available {{:00.ionic4:pasted:20190211-093712.png}} {{:00.ionic4:pasted:20190211-093840.png}} *LTS(Long Term Support＝安定版)のうち、一番新しいバージョンを指定してインストールします nvm install 10.15.1 nvm use 10.15.1 {{:00.ionic4:pasted:20190211-094225.png}} 上記の操作により、Windows10に、Node.js 10.15.1をインストールしたことと同じことになりました。 ここに、yarn, ionic, cordovaをインストールしておきます。 npm install -g yarn npm install -g ionic cordova {{:00.ionic4:pasted:20190211-104328.png}} 今回構築した環境 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 ===== リンク ===== 目次：[[00.ionic4:index.html|スマホ用ホームページ&スマホアプリ作成ソフトIonic4]] 前：[[00.ionic4:index.html|スマホ用ホームページ&スマホアプリ作成ソフトIonic4]] 次：[[00.ionic4:02.おすすめのionic入門書2019年版|おすすめのIonic入門書2019年版]]