00.ionic4:01.windowsでionicを始める方法
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
00.ionic4:01.windowsでionicを始める方法 [2019/02/10] – [Androidスマホにインストール] adash333 | 00.ionic4:01.windowsでionicを始める方法 [2019/02/12] (現在) – [オプション:nvm-windowsでNode.jsのバージョン管理] adash333 | ||
---|---|---|---|
行 12: | 行 12: | ||
<iframe width=" | <iframe width=" | ||
</ | </ | ||
+ | |||
+ | ===== すること ===== | ||
+ | *Ionic4アプリを作成し、GitHub経由でNetlifyにデプロイして公開する | ||
+ | |||
+ | ソースコード | ||
+ | https:// | ||
+ | |||
+ | DEMO | ||
+ | https:// | ||
+ | {{: | ||
+ | |||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
+ | < | ||
Windows 8.1 Pro | Windows 8.1 Pro | ||
+ | Git for Windows | ||
+ | </ | ||
+ | Git for Windowsのインストールについては、https:// | ||
今回構築した環境 | 今回構築した環境 | ||
行 27: | 行 42: | ||
-Ionicとcordovaのインストール | -Ionicとcordovaのインストール | ||
-ionic4でHello world!する。(アプリの作成) | -ionic4でHello world!する。(アプリの作成) | ||
- | -androidアプリ(apkファイル)の作成 | + | -GitHubにアップロード |
- | -apkファイルをGDriveを経由してandroidスマホにインストール | + | -GitHub経由でNetlifyにデプロイ |
===== Node.jsのインストール ===== | ===== Node.jsのインストール ===== | ||
行 122: | 行 137: | ||
なお、この時点で、405MBもの大きさがあります。1個で0.5GBとは、10個アプリを作ると5GBですから、作成中であないアプリはGitHubやBitBucketにアップロードするなどして、ディスク容量に気をつけないといけないと感じました。 | なお、この時点で、405MBもの大きさがあります。1個で0.5GBとは、10個アプリを作ると5GBですから、作成中であないアプリはGitHubやBitBucketにアップロードするなどして、ディスク容量に気をつけないといけないと感じました。 | ||
- | ===== androidアプリの作成 | + | ===== GitHubにアップロード |
+ | GitHubアカウントは持っているものとします。GitHubアカウントの作成方法については、[[: | ||
+ | *https:// | ||
+ | {{: | ||
+ | *Repository nameのところに、ionic4-tabs と入力し、Create repositoryをクリック | ||
+ | {{: | ||
+ | *以下のような画面になります。 | ||
+ | {{: | ||
+ | *その中でも、この後、以下のコードの一部を利用します。 | ||
+ | {{: | ||
+ | *ローカルパソコンのVisualStudioCodeのターミナル画面に戻り、以下を入力します。(https:// | ||
< | < | ||
- | ionic cordova platform | + | git add . |
- | ionic cordova build android | + | git remote add origin https:// |
+ | git push -u origin master | ||
</ | </ | ||
- | もし、「? | + | {{: |
- | all it and continue? | + | |
+ | {{: | ||
- | {{:pasted:20170609-010352.png}} | + | ===== Netlifyにデプロイ ===== |
+ | *https:// | ||
+ | {{:00.ionic4:pasted:20190210-133227.png}} | ||
+ | *画面右上の『New site from Git』をクリック | ||
+ | {{: | ||
+ | *GitHub をクリック | ||
+ | {{: | ||
+ | *Authorized の画面が出てから、以下のような画面に切り替わるので、今回は、" | ||
+ | {{: | ||
+ | {{: | ||
+ | *以下のように、'' | ||
+ | --prod%%'' | ||
+ | {{: | ||
+ | *次の画面で何分か待つと、うまくいくと、デプロイが完了して、リンクが表示されるので、画面上の方のリンクをクリック | ||
+ | {{: | ||
+ | *すると、無事、サイトが公開されます。このサイトは、自分のスマホなどでもアクセスすることができます。 | ||
+ | {{: | ||
+ | https:// | ||
- | {{: | + | 以上となります。 |
- | だいぶ時間がかかります。 | + | ===== ソースコード ===== |
+ | https:// | ||
- | {{:pasted: | + | DEMO |
+ | https://wizardly-bassi-9cce21.netlify.com/ | ||
- | {{: | + | ===== オプション:nvm-windowsでNode.jsのバージョン管理 ===== |
+ | Node.jsもバージョンアップが繰り返されますが、npmが複数存在していると、'' | ||
+ | 参考:https:// | ||
+ | {{: | ||
- | 指定されたフォルダを開いて、android-debug.apkというファイル(約4MB)を、自分のスマホにメールして、インストールします。なお、スマホの設定については、[[http:/ | + | *以下のリンクから、最新版のnvm-setup.zipをダウンロード |
+ | https:// | ||
+ | {{: | ||
+ | *解凍して、中身のexeファイルをダブルクリックして起動し、指示に従ってインストール。 | ||
+ | {{: | ||
+ | *念のため、Windowsを再起動 | ||
+ | *VisualStudioCode(コマンドプロンプトでもOK)で適当なフォルダを開き、Ctrl+@でコマンドプロンプトを起動。(WSLなどに変更している場合は、'' | ||
+ | < | ||
+ | nvm -v | ||
+ | nvm list available | ||
+ | </ | ||
+ | {{:00.ionic4: | ||
+ | {{: | ||
+ | *LTS(Long Term Support=安定版)のうち、一番新しいバージョンを指定してインストールします | ||
+ | < | ||
+ | nvm install 10.15.1 | ||
+ | nvm use 10.15.1 | ||
+ | </ | ||
+ | {{: | ||
+ | |||
+ | 上記の操作により、Windows10に、Node.js 10.15.1をインストールしたことと同じことになりました。 | ||
+ | |||
+ | ここに、yarn, ionic, cordovaをインストールしておきます。 | ||
+ | < | ||
+ | npm install -g yarn | ||
+ | npm install -g ionic cordova | ||
+ | </code> | ||
+ | {{:00.ionic4: | ||
+ | |||
+ | 今回構築した環境 | ||
+ | < | ||
+ | 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: | + | 目次:[[00.ionic4: |
- | 前:[[00.ionic4: | + | 前:[[00.ionic4: |
次:[[00.ionic4: | 次:[[00.ionic4: |
00.ionic4/01.windowsでionicを始める方法.1549801275.txt.gz · 最終更新: 2019/02/10 by adash333