POTTIRI'S AUTOBIOGRAPHY

工作やダイエットやITで遊ぶアラフォーエンジニアの自伝ブログです。

社畜やってるとなんか思いついても情熱が2日しか持たない

社畜やってると平日の間にあれもやりたいこれもやりたいって浮かんでくるけど、その情熱は週末跨いじゃうとしぼんじゃう。
大体2日ぐらいしかもたない。
情熱のあるうちに素早く形にしないと物事は前に進まない。 そのためには切り捨てるとこは切り捨ててとにかく目的を果たすことが大切だ!と思う!

今週は奥さんが体重の履歴を取りたいというので、そういうアプリを作ることにした。
アプリ作りは将来的にプログラミング教室のメニューに加えるかもしれないし、いっちょやってみよう!

充てられる時間

週末といえど、昼間は買い物につきあったりしないといけないのでNG。
それ以外の時間も子供の相手をしないといけないので、
使えるのは子供の寝た後の数時間のみか。
ああ、そういえば今週は節分かその時間も考えておかないと。
実質充てられる時間は6時間ぐらいかな。

仕様

  • 体重の記録
  • 一覧表示
  • 折れ線グラフの表示

以上。
絶対どっかにあるアプリだけど、作ると決めた!
Monaca使ったことあるからMonacaで作るぜ! HTMLとJavascriptは仕事でも使ってるしな。
グラフはChart.jsでいけるだろう。

MonacaとPhoneGap

なんかMonacaのプラン体型わかりにくくなってない?
ふむふむ無料トライアルで一旦契約して、プランをフリープランに落とせばいのね。
早速やってみる、え?プラグインが一部しか使えないじゃん。
これはだめだ却下。
他のものがないか探したところ、この記事にたどり着いた。

qiita.com

よっしゃPhoneGap採用。

ライブラリの選定

デザインは心得がないのでBootstrapだ!
画面遷移と一覧表示があるけど素のJavaScriptjQueryで書くのはめんどいのでVue.jsをぶちこもう。
ちょっとチャレンジだけどAngularJSと似たようなもんだろ。
jQueryガリガリ書くより絶対早い。
データベースはSQLiteかな?と思ってたけどPhoneGapやVue.jsに絡めた情報が少ない。
諦めた!
localStorageで行こう!

ライブラリの配置

各ライブラリを落として配置するのもめんどくせえ。
CDN経由でいいだろ。
あれ?動かない。
CDN経由じゃだめなのか。
しょうがねえローカルに落とすか。
時間ないのでnpmとか使わないよ。

画面遷移

画面遷移したいんだけど、Vue.jsのコンポーネントとかテンプレートがよくわからない。
とりあえず今回はx-templateでいいや。
各関数も今回はroot?ぽいっところで実装とする!

グラフ表示

Chart.jsで表示するぜー。
あっさり出たから嬉しい。
あれ、データ更新した時の再描画どうするんだろ。
保存ボタン押した時にグラフの再作成メソッドを呼ぶようにしよう。
なんかVueから普通のJavaScript関数呼ぶのはどうかと思うけど、今回は目をつぶろう。

そんなこんなで完成

一応形になりました。 ソースはこちらでっす。

github.com