ブログ移行しました

はてなブログから移行しました。

レイアウトやコンテンツは調整中なのですが
今後はこちらを更新していこうと思います。

先日、VuePressを知りました。
ブログは今後対応予定とのことで楽しみ。

それからNuxt.jsの翻訳、guide部分完了しました!

なぜか102%になっているパートがあるけど、気持ちの現れとして気にしない(`・ω・´)

他にも翻訳する方が出てきて嬉しい限り。
引き続きがんばるぞい。

Share

avaでテスト&GitLab CIに触れてみる

今日は前回作成した体重可視化サイトでavaによるテスト作成と
作成したテストをGitLab CIで走らせたいと思います。

テスト作成

公式の説明に従い、設定やテストケースを作成します。

ava、jsdomのインストール

1
yarn add --dev ava jsdom

package.jsonにava、jsdomを追加

1
2
3
4
5
6
7
8
9
10
11
12
13
"scripts": {
"test": "ava",
},
"ava": {
"require": [
"babel-register"
]
},
"babel": {
"presets": [
"es2015"
]
}

テストケースの作成

testというフォルダを作成し、index.test.jsを作成します。
テストケースはほぼ公式そのままです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import test from 'ava'
import { Nuxt, Builder } from 'nuxt'
import { resolve } from 'path'

// We keep a reference to Nuxt so we can close
// the server at the end of the test
let nuxt = null

// Init Nuxt.js and start listening on localhost:4000
test.before('Init Nuxt.js', async t => {
const rootDir = resolve(__dirname, '..')
let config = {}
try { config = require(resolve(rootDir, 'nuxt.config.js')) } catch (e) {}
config.rootDir = rootDir // project folder
config.dev = false // production build
nuxt = new Nuxt(config)
await new Builder(nuxt).build()
nuxt.listen(4000, 'localhost')
})

// Example of testing only generated html
test('Route / exits and render HTML', async t => {
let context = {}
const { html } = await nuxt.renderRoute('/', context)
t.true(html.includes('<h1 class="title">Weight Loss Progress</h1>'))
})

// Example of testing via DOM checking
test('Route / exits and render HTML with CSS applied', async t => {
const window = await nuxt.renderAndGetWindow('http://localhost:4000/')
const element = window.document.querySelector('.title')
t.not(element, null)
t.is(element.textContent, 'Weight Loss Progress')
t.is(element.className, 'title')
})

// Close the Nuxt server
test.after('Closing server', t => {
nuxt.close()
})

動作確認

ローカルで動作確認を行います。

1
yarn run test

GitLab CIの設定

.gitlab-ci.yml(設定ファイル)の作成

行うのはテストのみなので、以下のようにしました。

1
2
3
4
5
6
7
8
9
10
11
image: node:latest

job:
before_script:
- yarn install
stage: test
script: yarn run test

cache:
paths:
- node_modules/

#GitLabのコンソール上では特に設定せずデフォルトのまま行いました。

GitLab CIで走らせる

コミットすると自動で走ります。


どきどき・・・


成功!


成功すると一覧にも✓マークが表示されます。

まとめ

思っていた以上に簡単にGitLab CIを走らせることが出来ました。

あとはテストケースの設計ですね。
コンポーネントのテストはどう行うのか?など
avaの使い方についてはもっと調べないと、と思います。

とりあえずは一歩踏み出せたので今日はこれまで:)

ソースコード

https://github.com/aytdm/weight-record

参考

その他

OSSのコミッターへの足掛かりとしてNuxt.jsの翻訳に携わり始めました。
英語力向上にも繋げたいと思いつつ、
まずはguideの翻訳率100%を目指したいところです。

Share

nuxtとbuefyを使って日々の体重の推移をグラフで可視化する

ダイエットには日々の体重を測定し、記録する方法があります。
もちろん それだけで減量はしないのですが、
今の体重がどれくらいかという意識を働かせることが大事だそうです。

自分一人で継続するには鉄の意志が必要なため
第三者に自分の体重を報告し、モチベーションを維持する人もいます。

今回はそんな人がさらにやる気を出せるよう
日々の体重の推移をグラフで可視化してみました。

要件

  • 計測開始時から現在までの体重の推移を折れ線グラフで表示する
  • 計測開始時から最新日の体重の増減量を明示する
  • 各月ごとの体重の推移を折れ線グラフで表示する
  • 各月ごとの体重の増減量を明示する
  • 各月のy軸最小値は目標値である70kg、y軸最大値は95kgとする
  • 各月の目標減量(-2kg)を達成していたら「おめでとう」と表示する
  • 体重を登録または更新するためのフォームを用意する
  • とりあえず1年は使われる想定

アーキテクチャ

AWSのAPI Gateway、Lambda、RDS(MySQL)を使用し
サーバレスにトライしました。

※実運用ではLamdaから直接RDSを触る方法は推奨されないので留意ください。
あくまで勉強用の構成です。

#フロント周り
フレームワークはNuxt.js、UIライブラリはBulma
グラフ描画にはvue-chartjsを用い、Netlifyにデプロイしました。

使用したモジュールのバーション

1
2
3
4
5
6
7
8
"axios": "^0.17.1",
"buefy": "^0.6.3",
"chart.js": "^2.7.1",
"moment": "^2.20.1",
"node-sass": "^4.7.2",
"nuxt": "^1.0.0",
"sass-loader": "^6.0.6",
"vue-chartjs": "^3.1.1"

スクリーンショット

計測開始時から現在までの体重の推移

体重を登録または更新するためのフォーム

各月ごとの体重の推移

最後に

Netlifyについて

GitHub Pagesと違い自分でファイルを生成しないで済む点
Netlifyは簡単で感動しました。

フロント周りについて

初めてmomentを使ったのですが便利ですね!
これは手放せないライブラリになりそうです。

UIライブラリにはbuefyもとい、bulmaを使いました。
レスポンシブな点が魅力的だと感じました。
element-uiはレスポンシブではないものの、色合いや
フォームのバリデーションルールを定義できる点が個人的に好きです。

今回はグラフ部分をコンポーネント化し
1ページに処理をずらずら書いたのですが、
もう少しすっきりできないかと思っています。

アーキテクチャについて

自分で一からAWSの環境を用意するのは初めてで新鮮でした。

最初はLambdaと相性がいいだろうとDynamoDBで考えていたのですが
時系列に値を保持できないため、MySQLに変更しました。
後々調べたら、NoSQLでもGridDBやRiak TSなど時系列に強いDBがあるんですね。

ちょいちょいエラーが発生しますが、今回は目をつむってもらおう。。。

ひとりごと

最近は忙しいらしく結果が芳しくありませんが
気に入ってもらえたようで大成功です!
個人的にもIoTで使えそうなことが出来たので満足です:)

それにしても、自分で登録できるようにフォームを用意したのに全く使ってもらえない・・・。

ソースコード

https://github.com/aytdm/weight-record

参考

Share