windowsでionicを始める方法
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
windowsでionicを始める方法 [2017/06/08] – [WindowsでIonicを始める方法] adash333 | windowsでionicを始める方法 [2018/10/07] (現在) – 外部編集 127.0.0.1 | ||
---|---|---|---|
行 5: | 行 5: | ||
Ionicをインストールするためには、Node.js 6以上が必要ですので、以下の順番でインストールを行います。今回は、エディタとして、筆者の趣味で、VisualStudioCodeも一緒にインストールします。以下の画面は、Windows 8.1 Proの画面ですが、Windows7やWindows10でもほぼ同じです。 | Ionicをインストールするためには、Node.js 6以上が必要ですので、以下の順番でインストールを行います。今回は、エディタとして、筆者の趣味で、VisualStudioCodeも一緒にインストールします。以下の画面は、Windows 8.1 Proの画面ですが、Windows7やWindows10でもほぼ同じです。 | ||
+ | |||
+ | このページを動画にまとめてみました(約6分)。 | ||
+ | |||
+ | < | ||
+ | <iframe width=" | ||
+ | </ | ||
+ | |||
+ | ===== 開発環境 ===== | ||
+ | Windows 8.1 Pro | ||
+ | |||
+ | ===== WindowsにIonic3をインストールする流れ ===== | ||
+ | -Node.jsのインストール | ||
+ | -VisualStudioCodeのインストール | ||
+ | -Ionicとcordovaのインストール | ||
+ | -ionic3でHello world!する。(アプリの作成) | ||
+ | -androidアプリ(apkファイル)の作成 | ||
+ | -apkファイルをGdriveを経由してandroidスマホにインストール | ||
+ | |||
+ | ===== WindowsでIonicを始める方法 ===== | ||
(1)Node.jsのインストール | (1)Node.jsのインストール | ||
行 52: | 行 71: | ||
{{: | {{: | ||
- | かなり長い時間待つが、我慢。インストールが終了した後、 | + | かなり長い時間待ちますが、我慢。インストールが終了した後、 |
< | < | ||
行 76: | 行 95: | ||
{{: | {{: | ||
- | ? Link this app to your Ionic Dashboard to use tools like Ionic View? と聞かれても、とりあえず、Enterを押しておく。(ionicにloginしていなければ、以下のような画面になる。) | + | ? Link this app to your Ionic Dashboard to use tools like Ionic View? と聞かれても、とりあえず、Enterを押しておきます。(ionicにloginしていなければ、どちらにしろ、以下のような画面になります。) |
{{: | {{: | ||
+ | |||
+ | 作成したアプリの起動を行います。 | ||
< | < | ||
行 89: | 行 110: | ||
{{: | {{: | ||
- | その後、自動的にブラウザが開いて、以下のような画面が表示される。 | + | その後、自動的にブラウザが開いて、以下のような画面が表示されます。 |
{{: | {{: | ||
- | なお、サーバを停止するときは、VisualStudioCodeのcmd.exeの画面で、Ctrl+Cを押して、Y+Enterを押すと、以下のようにサーバを停止することができる。 | + | これであなたもIonic3デビューです! |
+ | |||
+ | なお、サーバを停止するときは、VisualStudioCodeのcmd.exeの画面で、Ctrl+Cを押して、Y+Enterを押すと、以下のようにサーバを停止することができます。 | ||
{{: | {{: | ||
行 99: | 行 122: | ||
(5)androidアプリの作成 | (5)androidアプリの作成 | ||
+ | < | ||
+ | ionic cordova platform add android | ||
+ | ionic cordova build android | ||
+ | </ | ||
+ | もし、「? | ||
+ | all it and continue? | ||
+ | {{: | ||
+ | {{: | ||
+ | だいぶ時間がかかります。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | |||
+ | 指定されたフォルダを開いて、android-debug.apkというファイル(約4MB)を、自分のスマホにメールして、インストールします。なお、スマホの設定については、[[http:// | ||
+ | |||
+ | (6)上記アプリを、arrows M03にインストールして起動した画面は、以下のようになります。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | これで、Hello worldはおしまいです。 | ||
(参考) | (参考) | ||
行 108: | 行 153: | ||
Installing Ionic(公式サイト:英語)\\ | Installing Ionic(公式サイト:英語)\\ | ||
http:// | http:// | ||
+ | |||
+ | |||
+ | |||
+ | 以下は、ionic-cli v2のときのものであり、今は微妙にコマンドが異なっています。Ionicはversion変更がめまぐるしく、そのたびに、新しいコマンドなどを覚えてなければならなかったりするのが非常に面倒です。また、何かエラーが出たときには、そのエラー内容をGoogle検索して、英語のStackoverflowなどの回答を見て、自分のパソコンで修正していく必要があります。 | ||
行 148: | 行 197: | ||
=> | => | ||
+ | |||
+ | |||
+ | |||
+ | =====リンク===== | ||
前: | 前: | ||
<wrap hi> | <wrap hi> |
windowsでionicを始める方法.txt · 最終更新: 2018/10/07 by 127.0.0.1