Ionic3でタイマーアプリ

Angular 2 (, Angular 4, ionic3)に関して、以下の本を繰り返し読んでいる。


Angular2によるモダンWeb開発 Kindle版
末次 章 (著)
発売日:2017/1/18
2800円

また、JavaScriptの基本に関しては、以下の本を繰り返し読んでいる。


これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん Kindle版
たにぐち まこと (著)
発売日:2017年03月27日
2580円

今回は、上記本のタイマーアプリを、Ionic3で実装する。

(環境)
Windows8.1
Node 6.10.2
cordova 6.5.0
Ionic CLI 2.2.2
VisualStudioCode
Git 2.8.1

(1)Ionic3アプリの作成

cmd.exe(コマンドプロンプト)で、アプリを作成したい場所に移動してから、

image

2017年5月時点で作成したが、package.jsonはこんな感じ

image

重要な部分はこのあたりか(@ionic/storageとか、仕様が変わって本当に困る。)

“@angular/core”: “4.1.0”,
“@ionic/storage”: “2.0.1”,
“ionic-angular”: “3.2.1”,

とりあえず、/ionic3-timer/ フォルダに移動してから、

image

(2)src/pages/home/home.html

(変更前)
image

(変更後)
image

●タイトルに背景を青色(初期設定でprimary)にするとき

● card

ここで、

とすると、デフォルトの設定では、背景が黒になり、文字が白になる。いちいち、文字を白に設定しなくてよいので楽!

image

(デフォルトの色の設定)src/themes/variables.scss
image

(参考)
https://ionicframework.com/docs/components/#cards

(3)画像の挿入

assets/ フォルダに、img/ フォルダを作成し、その中に、画像ファイルを入れる。

今回は、写真AC(https://www.photo-ac.com/)から、桜の写真をダウンロードして、sakura.jpg という名前で保存。

image

テンプレートからは、

でアクセスできるらしい。

image

(参考)
https://ionicframework.com/docs/components/#card-image

IONIC2 画像フォルダの設定について
Administrator 2017-03-02
https://sndbox.jp/ionic2/ionic2-image-dir

(4)ボタンの挿入

image

ボタンを幅100%にする。(こうすれば、<div align=”center”> は不要となる。)

image

(参考)
https://ionicframework.com/docs/components/#buttons

https://ionicframework.com/docs/components/#block-buttons

How to centre a button?
ionic Feb 5
https://forum.ionicframework.com/t/how-to-centre-a-button/78441/12

(5)ページの動的な書き換え

home.tsのところに、適当に、

とやったら、ダメだった。こちらを参考に書き換えたところ、うまくいった。

home.html (一部)

home.ts (一部)

image

(参考)

「ionic2」まとめ連載(其の11・動的なページ内容を変更する)
mucunwuxian
2016年08月25日に更新
http://qiita.com/mucunwuxian/items/aee92f8ad6442cd7c210

(6)現在の時刻を表示(1秒ごとに自動更新)

home.html(一部)

home.ts (一部)

image

(参考)

Angular2 + Typescript display current dateTime component

http://embed.plnkr.co/1DtJB6nAAYp9ZXOcfP6P/

Test format Date Angular 4.x
https://embed.plnkr.co/7sG0YeCugDrDcMJJF6Vd/?show=app%2Fapp.component.ts&show=preview

DatePipe (Angular公式)
https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html

ちょこっと修正。

image

(7)STARTボタンをクリックしたら、今の時刻を表示。

Buttonをクリックしたときイベントを発生させたい場合、xxx.html

と打ち込み、xxx.ts で、以下のようにクリックしたときの関数(ここでは、onClickMe()関数)を定義する。

今回は、

home.html(一部)

home.tx(一部)

とすることにより、STARTボタンをクリックする前は、”00:00:00″と表示しておいて、STARTボタンをクリックすると、クリックした瞬間の時刻を表示することとした。

自分で関数を定義するときは、constructorの外に関数の定義を記載するらしい。。。constructor 全くわからん。

image

(参考)
Binding to user input events (Angular公式)
https://angular.io/docs/ts/latest/guide/user-input.html

so-zou.jp   Dateオブジェクト
http://so-zou.jp/web-app/tech/programming/javascript/grammar/object/date.htm

(8)時間の差を求める

ここら辺は、Typescriptが変数の型を厳密にするよう求めてくるので、JavaScriptと比べて変なところでtypeの違いからくるエラーに苦労する。(date, number, string)

getTime関数を利用する

image

STARTボタンを押すと、押してからの秒数が自動的に表示される。Javascriptとだいぶ書き方が異なり、結構苦労した。。。

image

秒 = Math.floor(ミリ秒 / 1000);

ionic(Angular)での、変数の定義の仕方が分からず、ガリガリ計算式を1行にしてしまう。。。

image

秒から、分と時間を計算して表示。

image

60秒以上、60分以上になった場合、60の倍数を引く。

Typescript、その名の通り、型定義が面倒だぞー!

image

addZero関数を定義して、数字が1桁のとき、0を加えて2桁にする。

っていうか、this地獄、なんとかならないのでしょうか。。。

image

(参考)
How can I calculate the time between 2 Dates in typescript
http://stackoverflow.com/questions/14980014/how-can-i-calculate-the-time-between-2-dates-in-typescript

(9)STOPボタンの作成(STARTボタンを押したとき)

トグルボタン

ionic2 toggleで検索すると、別のものが出てきてしまう。。。

こんな簡単なことにも、私はかなり悩んだ。あきらめかけたそのとき、なんとかできた。

home.html(一部)

home.tx(一部)

image

(参考)
Conditional Attributes, Styles, and Classes in Ionic 2
Josh Morony · April 5, 2017
https://www.joshmorony.com/conditional-attributes-styles-and-classes-in-ionic-2/

(10)STOPボタンの作成(STOPボタンを押したとき)

STOPボタンを押すと、STARTボタンに戻るようにする。if 構文

image

STOPボタンを押すと、時間が止まるようにする。clearInterval

home.tx(一部)

image

(11)Androidアプリの作成

image

image

このapkファイル(約4MB)を、自分のスマホに送ってインストール。

arrows M03

Screenmemo_share_2017-05-13-17-38-56

動いた!しかし、Javascriptのコードを、Ionic3に変換(Typescript)しただけなのに、途中でエラーと格闘しながら、挫折しそうになりながら、丸一日かかってしまった。。。

でも、プログラミングして、何かアプリを作るのは楽しい!

ソースコードは下記にアップロードした。

https://github.com/adash333/ionic3-timer

(参考)

「ionic2」まとめ連載(其の10・静的なページ内容を変更する)
mucunwuxian
2016年08月25日に更新
http://qiita.com/mucunwuxian/items/46ba24a0e0e5918eda74

2016/11/18 Android, iPhone Angular2, Ionic2, Sass inoue
Ionicでモバイルアプリを作ろう!(5)スタイル定義
http://tech.pjin.jp/blog/2016/11/18/create_ionic_app_5/

関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする