ionic3でタイマーアプリ
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
ionic3でタイマーアプリ [2017/06/14] – [ionic3でタイマーアプリ] adash333 | ionic3でタイマーアプリ [2018/10/07] (現在) – 外部編集 127.0.0.1 | ||
---|---|---|---|
行 1: | 行 1: | ||
- | =====AndroidStudioのインストール===== | + | =====ionic3でタイマーアプリ===== |
- | 以下のページから、AndroidStudioをインストールしてください。 | + | [[http:// |
- | https:// | + | (環境)\\ |
- | + | ||
- | + | ||
- | + | ||
- | =====ionic3でタイマーアプリ===== | + | |
- | このページでは、Hello World後の初めてのionicアプリとして、タイマーアプリのソースコードをGitHubからダウンロードして、インストールを行い、androidアプリを作成し、自分のandroidスマホにインストールするところまでを解説させて頂きます。 | + | |
- | + | ||
- | (環境) | + | |
Windows 8.1 Pro\\ | Windows 8.1 Pro\\ | ||
Node.js 6.10.2\\ | Node.js 6.10.2\\ | ||
ionic-cli 3.4.0\\ | ionic-cli 3.4.0\\ | ||
VisualStudioCode | VisualStudioCode | ||
- | |||
http:// | http:// | ||
行 22: | 行 14: | ||
https:// | https:// | ||
- | =====Gitのインストール===== | ||
- | |||
- | いきなりGit、、、いつもよくわからないGit、、、ですが、今回は、git cloneしか使いませんのでご安心ください。とりあえず、以下からGit for Windowsをダウンロードして、手順に従ってインストールしてください。 | ||
- | |||
- | https:// | ||
- | {{: | ||
- | |||
- | 上記のDownloadをクリックすると、Git-2.13.1-64-bit.exe(約37MB)がダウンロードされるので、ダウンロード完了後、ダブルクリックして、手順通りにインストールします。途中、何を選択したらよいか迷いますが、以下の「こっそり始めるGit/ | ||
- | Adjusting your PATH environment では、Use Git from Git Bash only を選び、\\ | ||
- | Configuring the line ending conversions では、Checkout as-is, commit as-is を選びます。 | ||
- | |||
- | (参考) | ||
- | |||
- | 2016年03月31日 05時00分 更新 | ||
- | こっそり始めるGit/GitHub超入門(1): | ||
- | 初心者でもWindowsやMacでできる、Gitのインストールと基本的な使い方 (1/5)\\ | ||
- | http:// | ||
- | |||
- | サルでもわかるGit入門\\ | ||
- | http:// | ||
- | |||
- | =====GitHub上のアプリをダウンロードしてインストール===== | ||
- | まずは、(ほぼ)完成系のアプリをGitHubからダウンロードして、自分のパソコンで動かしてみます。 | ||
- | |||
- | (1)VisualStudioCodeの起動 | ||
- | C:\ionic\ フォルダの中で右クリックして、「Open with Code」をクリック。 | ||
- | |||
- | {{: | ||
- | |||
- | (2)Ctrl+@を押して、cmd.exeの画面を出す。 | ||
- | |||
- | |||
- | (3)以下のコマンドを入力して、git cloneする。 | ||
- | |||
- | < | ||
- | git clone https:// | ||
- | </ | ||
- | |||
- | {{: | ||
- | |||
- | (4)npm installする。 | ||
- | |||
- | < | ||
- | cd ionic3-timer | ||
- | npm install | ||
- | </ | ||
- | |||
- | 数分かかる。 | ||
- | |||
- | {{: | ||
- | |||
- | {{: | ||
- | |||
- | (5)アプリの起動 | ||
- | |||
- | < | ||
- | ionic serve | ||
- | </ | ||
- | |||
- | いろいろ聞かれることがあるが、とりあえず、Yes(Enterを押すだけ)としておく。数分かかる。 | ||
- | |||
- | {{: | ||
- | |||
- | すると、自動的にブラウザが開いて、以下のように表示されます。 | ||
- | |||
- | {{: | ||
- | |||
- | Startボタンをクリックすると、1秒ごとにカウントアップされ、 | ||
- | |||
- | {{: | ||
- | |||
- | そのあと、STOPボタンをクリックすると、タイマーが止まります。 | ||
- | |||
- | {{: | ||
- | |||
- | (6)イメージファイルの挿入。 | ||
- | |||
- | imageは、 | ||
- | |||
- | https:// | ||
- | |||
- | などからダウンロードして、sakura.jpgという名前に変更して、www/ | ||
- | (img/ | ||
- | |||
- | {{: | ||
- | |||
- | ブラウザのリロード(更新)ボタンをクリックします。 | ||
- | |||
- | {{: | ||
- | |||
- | すると、以下のような画面になります。 | ||
- | |||
- | {{: | ||
- | |||
- | (7)サーバ停止 | ||
- | |||
- | VisualStudioCodeの、cmd.exeの画面で、「Ctrl+C」を押します。そのあと、Y、Enterを押すと、サーバが停止します。 | ||
- | |||
- | {{: | ||
- | |||
- | (8)androidアプリの作成 | ||
- | |||
- | < | ||
- | ionic cordova platform add android | ||
- | ionic cordova build android | ||
- | </ | ||
- | |||
- | 3分くらいかかります。エラーが出てうまくいかない場合は、まずは、 | ||
- | |||
- | AndroidStudio2 | ||
- | |||
- | をインストールしてみてください。それでもうまく行かない場合は、エラーの内容をGoogle検索したり、\\ | ||
- | http:// | ||
- | を参考になさったりしてください。 | ||
- | |||
- | {{: | ||
- | |||
- | {{: | ||
- | |||
- | {{: | ||
- | |||
- | 出来上がったapkファイルの場所を開き、メールで自分のandroidスマホに送信する。約4.3MBです。 | ||
- | |||
- | {{: | ||
- | |||
- | (9)androidスマホにインストール | ||
- | |||
- | インストールして起動すると、以下のようなタイマーアプリの画面となります。(arrows M03) | ||
- | |||
- | {{: | ||
- | |||
- | | ||
- | http:// | ||
- | http:// | ||
+ | 作成中 | ||
=====リンク===== | =====リンク===== | ||
前: | 前: | ||
<wrap hi> | <wrap hi> | ||
- | [[おすすめのIonic3入門書2017年版]] | + | [[ionic3で計算アプリ]] |
</ | </ | ||
[[sidebar|目次]]\\ | [[sidebar|目次]]\\ |
ionic3でタイマーアプリ.1497415788.txt.gz · 最終更新: 2018/10/07 (外部編集)