ユーザ用ツール

サイト用ツール


windowsでionic4を始める方法

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
windowsでionic4を始める方法 [2018/12/22] – [リンク] adash333windowsでionic4を始める方法 [2019/02/10] (現在) – [リンク] adash333
行 1: 行 1:
 ====== WindowsでIonic4を始める方法 ====== ====== WindowsでIonic4を始める方法 ======
  
 +スマホアプリ(&スマホ用WEBページ)作成用フレームワークIonicを始める方法を記載させていただきます。
  
 +PWA(Progressive Web Apps)という考え方があり、Ionicで作成してPWA対応させたWEBページであれば、WEBページを閲覧するだけで、そのままスマホアプリとしてユーザーにスマホに保存してもらうことが可能だそうです。
  
 ===== 開発環境 ===== ===== 開発環境 =====
行 15: 行 17:
 Ionic CLI 4.6.0 Ionic CLI 4.6.0
 </code> </code>
 +なお、作成したアプリのpackage.jsonの一部を記載させていただきます。 
 +<code> 
 +"@angular/common": "~7.1.4" 
 +"@ionic/angular": "4.0.0-rc.0" 
 +"rxjs": "~6.3.3", 
 +</code>
 ==== 1.Node.jsのインストール ==== ==== 1.Node.jsのインストール ====
 https://nodejs.org/ja/からインストーラー(左右に表示されていますが、左側の『LTS版』を選択してください)をダウンロードして、Node.jsをインストールします。 https://nodejs.org/ja/からインストーラー(左右に表示されていますが、左側の『LTS版』を選択してください)をダウンロードして、Node.jsをインストールします。
行 53: 行 60:
  
 ==== 4.新規Ionic4アプリ(Angularベース)の作成 ==== ==== 4.新規Ionic4アプリ(Angularベース)の作成 ====
-Ionic3まではJavascriptフレームワークとしてAngularが必須であっのですがIonic4からは、Angularの他にもReactやVueが使用できるらしく、Ionic3までと同様にAngularを用いる場合は、ターミナルで、以下のように、最後に<wrap hi>--type=angular</wrap>を入力します。+Ionic3まではJavascriptフレームワークとしてAngularが必須で。しかし、Ionic4からは、Angularの他にもReactやVueが使用できるらしく、Ionic3までと同様にAngularを用いる場合は、ターミナルで、以下のように、最後に<wrap hi>--type=angular</wrap>を入力します。
 <code> <code>
 ionic start myApp blank --type=angular ionic start myApp blank --type=angular
 </code> </code>
 +{{:pasted:20181222-185151.png}}
 +数分かかる。
 +{{:pasted:20181222-185930.png}}
 +? Install the free Ionic Appflow SDK and connect your app? (Y/n)と聞かれるので、n + Enter とする。(Yにすると、このあとかなり面倒。)
 +{{:pasted:20181222-192132.png}}
 +{{:pasted:20181222-192203.png}}
 +言われた通りに、下記コードを入力。
 +<code>
 +cd myApp
 +ionic serve
 +</code>
 +ブラウザが自動的に開いて、以下のようになる。
 +{{:pasted:20181222-192914.png}}
 +
 +ちなみに、この時点で275MBの容量があります。
 +==== 5.home.page.htmlの編集 ====
 +src/app/home/home.page.htmlを編集してみます。
 +
 +(変更前)
 +{{:pasted:20181222-193700.png}}
 +
 +(変更後)
 +{{:pasted:20181222-194118.png}}
 +
 +これで、Ionic4アプリ(Angularベース)を作成することができました。
 +
 +サーバを停止したい場合は、VisualStudioCodeのcmd.exeの画面でCtrl+C, Y, Enter で停止することができます。サーバを停止しなくても、VisualStudioCodeでファイルなどを修正すると、それをionicが検知して、自動的に再コンパイルして、数十秒待つと、ブラウザの中身が更新されます。
 +
 +基本的に、ターミナル(コマンドプロンプト)での操作は、すべて、Angularのものとなるので、Angular CLIのページを参考にしてよいと思います。
 +
 +
  
  
行 66: 行 104:
 Ionic4.0.0-beta.0を試してみる Ionic4.0.0-beta.0を試してみる
 2018/7/27 2018/9/2 2018/7/27 2018/9/2
 +
 +===== リンク =====
 +目次:[[ionic4:index.html|Ionic4]]
 +
 +前:
 +
 +次:
 +

windowsでionic4を始める方法.1545472027.txt.gz · 最終更新: 2018/12/22 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki