ionic3でタイマーアプリ
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
|
ionic3でタイマーアプリ [2017/06/14] adash333 [ionic3でタイマーアプリ] |
ionic3でタイマーアプリ [2018/10/07] (現在) |
||
|---|---|---|---|
| ライン 1: | ライン 1: | ||
| =====ionic3でタイマーアプリ===== | =====ionic3でタイマーアプリ===== | ||
| - | このページでは、Hello World後の初めてのionicアプリとして、タイマーアプリのソースコードをGitHubからダウンロードして、インストールを行い、androidアプリを作成し、自分のandroidスマホにインストールするところまでを解説させて頂きます。 | ||
| - | （環境） | + | [[http://twosquirrel.mints.ne.jp/dokuwiki/doku.php/github%E4%B8%8A%E3%81%AEionic3%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB|こちらのページ]]で、ダウンロードしたタイマーアプリのソースコードを、デフォルトの状態から作成していきます。 |
| - | Windows 8.1 Pro | + | |
| - | Node.js | + | （環境）\\ |
| - | ionic-cli 3.4.0 | + | Windows 8.1 Pro\\ |
| + | Node.js 6.10.2\\ | ||
| + | ionic-cli 3.4.0\\ | ||
| VisualStudioCode | VisualStudioCode | ||
| - | |||
| http://twosquirrel.mints.ne.jp/?p=16984 | http://twosquirrel.mints.ne.jp/?p=16984 | ||
| ライン 14: | ライン 14: | ||
| https://github.com/adash333/ionic3-timer | https://github.com/adash333/ionic3-timer | ||
| - | =====Gitのインストール===== | ||
| - | |||
| - | いきなりGit、、、いつもよくわからないGit、、、ですが、今回は、git cloneしか使いませんのでご安心ください。とりあえず、以下からGit for Windowsをダウンロードして、手順に従ってインストールしてください。 | ||
| - | |||
| - | https://git-for-windows.github.io/\\ | ||
| - | {{:pasted:20170613-233709.png}} | ||
| - | |||
| - | 上記のDownloadをクリックすると、Git-2.13.1-64-bit.exe(約37MB)がダウンロードされるので、ダウンロード完了後、ダブルクリックして、手順通りにインストールします。途中、何を選択したらよいか迷いますが、以下の「こっそり始めるGit/GitHub超入門（１）」の通りにやるとよいです。具体的には、基本はそのままデフォルトのものを選択していき、 | ||
| - | 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://www.atmarkit.co.jp/ait/articles/1603/31/news026.html | ||
| - | |||
| - | サルでもわかるGit入門\\ | ||
| - | http://www.backlog.jp/git-guide/intro/intro1_1.html | ||
| - | |||
| - | =====GitHub上のアプリをダウンロードしてインストール===== | ||
| - | まずは、（ほぼ）完成系のアプリをGitHubからダウンロードして、自分のパソコンで動かしてみます。 | ||
| - | |||
| - | (1)VisualStudioCodeの起動 | ||
| - | C:\ionic\ フォルダの中で右クリックして、「Open with Code」をクリック。 | ||
| - | |||
| - | {{:pasted:20170613-235634.png}} | ||
| - | |||
| - | (2)Ctrl+@を押して、cmd.exeの画面を出す。 | ||
| - | |||
| - | |||
| - | (3)以下のコマンドを入力して、git cloneする。 | ||
| - | |||
| - | <code> | ||
| - | git clone https://github.com/adash333/ionic3-timer.git | ||
| - | </code> | ||
| - | |||
| - | {{:pasted:20170613-235351.png}} | ||
| - | |||
| - | (4)npm installする。 | ||
| - | |||
| - | <code> | ||
| - | cd ionic3-timer | ||
| - | npm install | ||
| - | </code> | ||
| - | |||
| - | 数分かかる。 | ||
| - | |||
| - | {{:pasted:20170614-000216.png}} | ||
| - | |||
| - | {{:pasted:20170614-000232.png}} | ||
| - | |||
| - | (5)アプリの起動 | ||
| - | |||
| - | <code> | ||
| - | ionic serve | ||
| - | </code> | ||
| - | |||
| - | いろいろ聞かれることがあるが、とりあえず、Yes（Enterを押すだけ）としておく。数分かかる。 | ||
| - | |||
| - | {{:pasted:20170614-000510.png}} | ||
| - | |||
| - | すると、自動的にブラウザが開いて、以下のように表示されます。 | ||
| - | |||
| - | {{:pasted:20170614-000644.png}} | ||
| - | |||
| - | Startボタンをクリックすると、１秒ごとにカウントアップされ、 | ||
| - | |||
| - | {{:pasted:20170614-000722.png}} | ||
| - | |||
| - | そのあと、STOPボタンをクリックすると、タイマーが止まります。 | ||
| - | |||
| - | {{:pasted:20170614-000759.png}} | ||
| - | |||
| - | (6)イメージファイルの挿入。 | ||
| - | |||
| - | imageは、 | ||
| - | |||
| - | https://www.photo-ac.com | ||
| - | |||
| - | などからダウンロードして、sakura.jpgという名前に変更して、www/assets/img/ フォルダの中に保存します。\\ | ||
| - | (img/ フォルダを、www/assets/ フォルダの中に新規作成します。) | ||
| - | |||
| - | {{:pasted:20170614-001251.png}} | ||
| - | |||
| - | ブラウザのリロード（更新）ボタンをクリックします。 | ||
| - | |||
| - | {{:pasted:20170614-001336.png}} | ||
| - | |||
| - | すると、以下のような画面になります。 | ||
| - | |||
| - | {{:pasted:20170614-001419.png}} | ||
| - | |||
| - | (7)サーバ停止 | ||
| - | |||
| - | VisualStudioCodeの、cmd.exeの画面で、「Ctrl+C」を押します。そのあと、Y、Enterを押すと、サーバが停止します。 | ||
| - | |||
| - | {{:pasted:20170614-001945.png}} | ||
| - | |||
| - | (8)androidアプリの作成 | ||
| - | |||
| - | <code> | ||
| - | ionic cordova platform add android | ||
| - | ionic cordova build android | ||
| - | </code> | ||
| - | |||
| - | 3分くらいかかります。エラーが出てうまくいかない場合は、エラーの内容をGoogle検索したり、\\ | ||
| - | http://qiita.com/567000/items/dc4917027cf060a3e2ea\\ | ||
| - | を参考になさったりしてください。 | ||
| - | |||
| - | {{:pasted:20170614-002057.png}} | ||
| - | |||
| - | {{:pasted:20170614-002302.png}} | ||
| - | |||
| - | {{:pasted:20170614-002417.png}} | ||
| - | |||
| - | 出来上がったapkファイルの場所を開き、メールで自分のandroidスマホに送信する。約4.3MBです。 | ||
| - | |||
| - | {{:pasted:20170614-002534.png}} | ||
| - | |||
| - | (9)androidスマホにインストール | ||
| - | |||
| - | インストールして起動すると、以下のようなタイマーアプリの画面となります。(arrows M03) | ||
| - | |||
| - | {{:pasted:20170614-003226.png}} | ||
| - | |||
| - | (参考)\\ | ||
| - | http://twosquirrel.mints.ne.jp/?p=15712\\ | ||
| - | http://twosquirrel.mints.ne.jp/?p=15745 | ||
| + | 作成中 | ||
| =====リンク===== | =====リンク===== | ||
| 前： | 前： | ||
| <wrap hi> | <wrap hi> | ||
| - | [[おすすめのIonic3入門書2017年版]] | + | [[ionic3で計算アプリ]] |
| </wrap>\\ | </wrap>\\ | ||
| [[sidebar|目次]]\\ | [[sidebar|目次]]\\ | ||
ionic3でタイマーアプリ.1497399321.txt.gz · 最終更新: 2018/10/07 (外部編集)
