更新Ionic4バージョンはこちらへ前回は、ionic3のおすすめの本を紹介させていただきました。今回は、ionic3で計算アプリを作成してみたいと思います。以下の本を参考にさせていただいています。この本の第5章「スタンドアロンアプリを作る」を、Ionic3(Angular4)で写経してみます。1.13.1今回は、ionic3を用いて、「元本」と「利息」を入力すると、10年後までの支払額が出力されるようなアプリを作成します。ソースコードは以下のリンクへ。フォルダの下に、ionic3-calculateというionic3アプリを作成することとします。押して、cmd.exeの画面を表示させる。cmd.exeで、以下のコマンドを入力して、ionic3アプリを作成する。installのところで数分待つ。serveによりサーバを起動します。serveすると、1分くらいで自動的にブラウザが開いて、下のような画面になります。ブラウザは、Chromeをお勧めします。このサイトでは、今後、以下のように、左側に縦長のChrome(ブラウザ)の画面を、右側に、VisualStudioCodeの画面を並べて表示することが多いです。停止することができます。サーバを停止しなくても、VisualStudioCodeでファイルなどを修正すると、それをionicが検知して、自動的に再コンパイルして、数十秒待つと、左側のChromeに変化が反映されます。Enterにより、サーバを停止します。アプリ作成直後のファイル構成ionic3アプリ作成直後のファイル構成は、以下のようになっています。package.jsonは以下のようになっています。(最初はあまり気にしないでよいと思いますが、@angula/coreと、@ionic/storageのversionは大事だと思います。serveして、サーバを起動しておきます。servesrc/pages/home/home.htmlの変更ページの見栄えを作成します。「元本」と「利息」の入力欄と、1年後から10年後までの支払額のリストを表示する枠を作成します。home.htmlをごっそり、以下のように書き換えてください。</ion-card></ion-content>(変更前)(変更後)<コード解説1><ion-xxx>というところは、全て、ionic特有のUI(見栄え)の表記です。ionicの公式ドキュメントを参照しつつ、入力します。<コード解説2>[(ngModel)]="initValue"は、Angularの“双方向データバインド”を使用して、ここで入力値(元本と利息)を受け取っています。rate">の部分は、Angularの“NgIfディレクティブ”であり、「initVlaueとrate両方が存在する場合に、ion-card以下の部分を表示す。number}}の部分は、Angularの“片方向データバインド”を使用して、10年後に支払額を以下の場所で表示するようにしています。Pipeによる数値表示の書式設定を行っており、ここでは、3桁ごとのカンマがつけられます。(筆者は詳細を理解しておりません。interface:見栄え)に慣れておく必要があります。最初は、これがかなり面倒ですが、bootstrapと同様、慣れるしかありません。(bootstrapを利用したい場合は、ionicではなく、Angular4+ng-bootstrpを利用することになります。)https://ionicframework.com/docs/components/#overview今回は、以下のページを参考に、stacked-labelsを使用しています。https://ionicframework.com/docs/components/#stacked-labelsbootstrapのようなgridシステムも利用できます。元本と利息の入力を受け取り、10年後の支払額を計算して返すプログラムを記載します。home.tsを、ざっくり、下に置き換えます。}}<コード解説1>Typescriptなので、以下のように型定義をしっかりしておかなくてはいけません。金利入力欄と双方向データバインド<コード解説2>あとは、calc()という、initVlaueとrateから10年後の金額answerを返す関数を定義します。(変更前)(変更後)ブラウザの画面で、元本と金利のところに数字を入力すると、自動的に10年後の金額が表示される。Enterでサーバを停止してから、以下のコマンドを入力。android途中、何か聞かれたら、YとしてEnter.数分かかる。どこにandroid-debug.apkファイルが作成されたのか表示される(下図の赤で囲った部分)ので、その場所に保存されているapkファイルを、自分のスマホにメールします。Androidアプリのインストールメールしたapkファイル(約4MB)を、自分のandroidスマホにインストールします。M03にインストールしてみました。以前のリビジョンバックリンク文書の先頭へ。