Cordovaで新しいアプリを開発したお話(Cordova製アプリ第三弾)

スマートフォンアプリ開発開発記, Cordova

どもども、最近の記事でも触れていましたが、この度やっとCordova製アプリ第三弾を公開するに至りました。この記事では、このアプリの紹介と今回の開発で得られた経験なんかを開発記という形で残していこうと思います。



OS : MacOS Sierra
npm : 3.10.10
Cordova : 7.0.1


1. 開発したアプリ

今回作成したアプリは”秒間で赤字を計算してくれるアプリ”です。例えば目標を”年収1000万円”とすると、3日(259,200秒)後だと82,191.780円がその瞬間の目標額になります。その時々で瞬間目標額を超えていれば黒字、逆なら赤字ということです。計算結果は下の画像のように数字とドーナツで表示します。

言葉で説明してもわかりにくいと思うので、一度使ってみてください。インストールはこちらから。

2. 簡単な使い方

ここでは”算数ドリル一週間で100ページ解く”というのを目標にして説明します。

1. カウンタ一覧画面の右上にある”+ボタン”から新しいカウンターを追加します.
1-1. “Counter Name”にはカウンターの名前 (今回なら “算数ドリル100ページ” など)
1-2. “Term”には開始時間と終了時間(“START”:当日, “FINISH”:一週間後の時間)
1-3. “Final Destination”には目標値(今回なら 100)
1-4. “Create”を押して作成完了

2. ペンシル型のボタンからカウントする要素を追加します.
(今回ならドリルをやる毎に更新すればいいと思います)
2-1. ペンシル型のボタンを押して”Counting Items List”を表示します
2-2. “+ADD”ボタンから要素を追加します。

2-3. “Item Name”に追加する要素の名前を入力します(今回なら “xx日目” など)
2-4. “Date”に要素に該当する時間を入力します
2-5. “Value”に要素の値を入力します(今回ならドリルのページ数)

2-6. “OK”ボタンを押しておしまいです
2-7. 最後にもう一つの”OK”ボタンを押して編集完了です

3. ドーナツの表示
3-1. ペンシルボタンの右にあるグラフボタンを押します
3-2. ドーナツの図が出てきますので、値を確認します
(画面内の数字は上から、現在値・現在の目標値・最終目標値です)
3-3. 画面のどこかを押すか、端末の戻るボタンでカウンター一覧に戻ります

4. その他
4-1. カウンターを編集・削除したいときは歯車ボタンです
4-2. 検索は画面上部の検索フォームからどうぞ

初回起動時にサンプルが表示されるので、それを確認してみてください。
正直こういう説明ってほとんどの方がみていないですよね(自分もそうですが……)。

3. 使用技術

さて、アプリの紹介が終わったので次に使用した技術なんかを紹介していこうと思います。とは言っても特別なものは使っていません。基本的にHTMLとCSSで枠組みやデザインを作り、JavaScaript(+jQuery)で動きを作成しているだけです。開発当初はAngulerを使ってみたりReactを使っていたのですが、資料を探してもバージョン違いで内容が全く違うというのに苦しめられたので、今回は外しました。

というわけで、今回初めて使ってみたのが”Semantic UI“というCSSのフレームワークです。これまで、CSSのフレームワークといえばBootstrapしか使ったことがありませんでした。しかしBootstrapは使っている人が多いためか、どうしても量産型ページ臭が強くなってしまいます。かと言って自分でデザインする能力もないので、今回は(多少使用者の少ない)”Semantic UI”を使ってみました。

使ってみた感想としては、「Bootstrapより細かい所を準備してくれている」です。Semantic UIは今回のアプリのためだけに採用したので、ButtonやModalなど機能全体の何パーセントしか使えていません。それでも、ボタンの連結やアイコンクラスなどBootstrapでは無い機能がちょくちょくあり、使いやすかったです。詳しい昨日は公式のComponentsのページを確認してみてください。

もう一つ初めて使ったのがCanvasとChart.jsです。canvasはHTMLのタグでページ内で図を書くために作られたものです(詳しい説明はこちらのサイト様に丸投げ)。そして、canvasに図を書くのに使ったのがChart.jsというJavaScriptのライブラリです。これはその名の通りチャート向けのライブラリで、シンプルな命令を書くだけで簡単に綺麗な図を描画することができます。本アプリではドーナツグラフを書くために使いました。対応しているグラフは円・棒・折れ線・レーダー, …と色々あり、これらを組み合わせることもできるみたいです。また、ネット上に情報もたくさんあるので初めてでも安心して使うことができます。

このアプリを開発して得られた知見的なものは記事として書いているので、そちらも興味があればみてみてください。
Cordovaアプリで終了確認ダイアログを出すよ
CordovaアプリにAdmob広告を表示するよ
JavaScriptに”Maximum call stack …”で怒られた1例と解決までにやったこと

4. 今後の展望

今後の展望です。将来的にはWebアプリにして、赤字カウンターをみんなでみられるようにしたいと考えています。それに加えて投げ銭機能なんかをつければクラウドファンディングみたいになるのでは無いでしょうか。

これまで色々開発してきた経験上、初めから考えすぎるとパンクして、結局何もできなくなるので、今はとりあえずオフラインのアプリとして公開させてもらいました。

おわりに

さて、長々と書かせてもらいました。
これからも頑張って開発していくのでよろしくお願いします。