ユーザ用ツール

サイト用ツール


サイドバー

目次

機械学習とは

プログラミング無しで機械学習

機械学習プログラミング入門

初めてのKeras2.0

初めてのTensorflow(YouTube)

初めてのChainer2.0

初めてのビットコイン

ビットコイン用語集

初めてのSolidityプログラミング

初めての医療統計

初めてのエクセルで医療統計

初めてのEZRで医療統計

初めてのRStudioでレポート作成

スマホアプリ作成ソフトIonic3

スマホアプリ作成ソフトIonic4

Ionicのためのjavascript tips

その他

NiftyCloudMobileBackend

税金など

Dokuwiki

ionic3で計算アプリ

以前のリビジョンの文書です


ionic3で計算アプリ

前回は、ionic3のおすすめの本を紹介させていただきました。
今回は、ionic3で計算アプリを作成してみたいと思います。
以下の本を参考にさせていただいています。

この本の第5章「スタンドアロンアプリを作る」を、Ionic3(Angular4)で写経してみます。
Angular4用のコードは、下記サイトで配布されています。

『Angular2によるモダンWeb開発』ダウンロードページ 2017年4月10日更新
http://ec.nikkeibp.co.jp/nsp/dl/09653/index.shtml

(環境)
Windows8.1
Node 6.11.0
Ionic CLI 3.4.0
VisualStudioCode 1.13.1

ionic3-calculateアプリの作成

C:/ionic/ フォルダの下に、ionic3-calculateというionic3アプリを作成することとします。

C:/ionic/ フォルダの中で右クリック > Open with Code をクリック

VisualStudioCodeが起動して、下のような画面になるので、Ctrl + @ を押して、cmd.exeの画面を表示させる。

cmd.exeで、以下のコマンドを入力して、ionic3アプリを作成する。

ionic start ionic3-calculate blank

npm installのところで数分待つ。

ionic3-calculateフォルダに移動し、ionic serveによりサーバを起動します。

cd ionic3-calculate
ionic serve

すると、1分くらいで自動的にブラウザが開いて、下のような画面になります。ブラウザは、Chromeをお勧めします。このサイトでは、今後、以下のように、左側に縦長のChrome(ブラウザ)の画面を、右側に、VisualStudioCodeの画面を並べて表示することが多いです。

サーバを停止したい場合は、VisualStudioCodeのcmd.exeの画面でCtrl+C, Y, Enter で停止することができます。サーバを停止しなくても、VisualStudioCodeでファイルなどを修正すると、それをionicが検知して、自動的に再コンパイルして、数十秒待つと、左側のChromeに変化が反映されます。今回は、分かりやすさを重視して、いったん、Ctrl+C, Y, Enterにより、サーバを停止します。

src/pages/home/home.htmlの変更

リンク

ionic3で計算アプリ.1497763181.txt.gz · 最終更新: 2018/10/07 (外部編集)