jacksonでunix timeをparse
どうやるんだろ?
文字列としてparseしてLocalDateTimeに変換してくれるgetterを作るぐらいしかパッと作れない。
yyyy-mm-ddとかそういうフォーマット指定する例はいろいろ出ててわかるんだけど、unix timeの10桁の数字をLocalDateTimeに変換する方法がわからないーーー
吸収中めも。
Spring Batchの日本語の情報すくないなー。軽い紹介ならいくつかあって参考になって嬉しいんだけど、踏み込んだものがないなー。
本家の英語ドキュメントがなかなかしっかりしてそうなんだけど、英語読むの遅い&読み間違いしそうでツライ。
あんまり実戦投入されてないのかなぁ?
Doma2との連携はなんとかできた。
トランザクション管理は今はSpring任せにしてるけど、doma側でもローカルトランザクションのマネージャーとか存在するみたいだし、どうすべきなのか?
データを書き込むときにdb見て重複チェックしたいときはどうすればいいんだろう?
ファイルの存在チェックはreaderのリスナーで前処理でやるべきか?それともタスクレットでやるべきか
DBと受領ファイル内容の突き合わせチェックをするバッチはどうつくるのか?これはタスクレットで良さそうな気がしてきた。
入力ファイルの項目レベルのバリデーションをアノテーションで実装するには?apt?googleさんのauto-common?勉強不足。これは後で
常駐バッチやら、1日1回のバッチやらいっぱいを1個のプロジェクトで作りたいんだけどmainがあるクラスいっぱいつくればいいのかな?共通的なものはどう定義するんだろな?
今日わかったこと
- CommandLineJobRunnerにconfigのクラスを渡して実行できる
- そのとき各jobのconfigクラスはコンポーネントスキャンからはずさないと面倒
- Domaでinsertは比較的簡単だったけどselectが面倒くさい
- DomaにStream<T> selectが用意されていたけどどう利用していいかわからん・・・
ただのメモ
- intellij::lombok→Annotation Processorsのチェックをつける
- intellij::javadocの追加を⌘+Shift+JでやりたいときはKeymapのfix doc commentに設定
- gradle::domaでcompileJavaが走る前にresourcesにコピーする設定が必要
- intellij::インポートの整理はcontrol+alt+o
最近のことめも
- haskellのお勉強を始めました。
- Springの再入門とか最近のjavaについていろいろお勉強をしている
- Spring BatchでDomaを利用する方法を調査中。
- Spring Batchで○○ファイルが存在するときは処理をする。みたいなことをどうやって実現するのか調査中
- Spring で@Autowiredとかつかわずに@Injectとか書いてインジェクトするためには?
- Spring Batchでlog4j2を使うためにはどうすれば?
- Gradleでマルチプロジェクトの設定方法?
- GradleでCIの設定どうやるの?
- Bean Validation? アノテーションだけでバリデーションかける方法とバリデーションエラー時の挙動の設定は?
その他
- コミュ症を脱出するぞー
- 軽度肥満体型から標準体型になるぞー
vueプロジェクトセットアップ2016/4/14版
2ヶ月も前のやり方でbuildが通るわけないじゃない。
javascriptおそるべし
今回の改良ポイント
- 以前のままだとbuildできない箇所の修正
- vueの公式でおすすめのテスト構成(karma,jasmine)でテストを作る
- ちょっとまともなtestを用意する 簡易コンポーネントを用意してそのテストをする
各モジュールバージョン
- node: v5.10.1
- npm:3.8.6
- babel-core:6.7.6
- vue:1.0.21
まずテストを作る前準備(小さいvueプロジェクト)
setup directory and node_modules
mkdir -p {build,test/{unit,e2e},src/{components,views/app,filters,directives,assets/{js,style,images,html}}}
npm init -y
npm i -g webpack webpack-dev-server babel-core babel-loader node-sass
npm i -S vue vuex
npm i -D babel-core babel-loader webpack style-loader css-loader node-sass sass-loader html-loader babel-plugin-add-module-exports babel-plugin-transform-runtime babel-polyfill babel-preset-es2015 babel-preset-stage-2 babel-runtime file-loader url-loader lodash
npm i -D extract-text-webpack-plugin html-webpack-plugin@2
npm i -D node-bourbon node-neat
.babelrc
{
"presets": ["es2015", "stage-2"]
}
webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var bourbon = require('node-bourbon').includePaths;
var neat = require('node-neat').includePaths;
var contentBase = __dirname + '/build';
var cssLoader = ExtractTextPlugin.extract('style', 'css?sourceMap!sass')
var htmlWebpackPlugin = new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/assets/html/index.template.html'
});
var pkg = require('./package.json');
var vendor = Object.keys(pkg.dependencies);
var options = {
sassLoader: {
includePaths: [bourbon, neat]
},
entry: {
app: ["./src/assets/js/app.js", "./src/assets/style/app.scss"],
vendor: vendor,
},
output: {
path: contentBase + '/',
filename: "js/[name].js",
contentBase: contentBase + '/build'
},
resolve: {
alias: {
vue: "vue/dist/vue",
lodash: "lodash"
},
modulesDirectories: ['node_modules', 'src/', 'src/assets/js/', 'src/assets/style/', 'src/views/', 'src/directives/', 'src/filters/', 'src/components/'],
// require()するときに拡張子を省略可能にします
extensions: ['', '.webpack.js', '.web.js', '.js']
},
devServer: {
contentBase: "./build",
},
module: {
preloaders: [],
loaders: [
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&minetype=application/font-woff"
},
{
test: /\.png$/,
loader: "url-loader?limit=100000"
},
{
test: /\.jpg$/,
loader: "file-loader"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass')
},
{
test: /\.html$/,
loader: "html"
},
{
test: /\.js(x?)$/,
loader: 'babel-loader?sourceMaps=true'
}
]
},
plugins: [
htmlWebpackPlugin,
new ExtractTextPlugin('./css/app.css', {disable: false}),
new webpack.optimize.CommonsChunkPlugin('vendor', 'js/vendor.js')
]
};
if (process.env.NODE_ENV === 'production') {
var defplugin = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
});
var minplugin = new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
});
options.plugins.push(defplugin);
options.plugins.push(minplugin);
options.plugins.push(new webpack.optimize.OccurenceOrderPlugin());
}
module.exports = options;
package.json(script property)
"scripts": {
"hot": "webpack-dev-server -d --inline",
"build": "NODE_ENV=production webpack --progress --hide-modules",
"test": "karma start karma.conf.js",
},
src/assets/html/index.template.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトルを入れてね</title>
</head>
<body>
<app><!-- ここにAPPが入ります --></app>
</body>
</html>
src/assets/js/app.js
import Vue from 'vue';
import App from '../../views/app'
require('../style/app.scss');
new Vue({
el:'body',
components: {App}
});
src/assets/style/app.scss
@import "~bourbon/app/assets/stylesheets/bourbon";
@import "~bourbon-neat/app/assets/stylesheets/neat";
body {
@include outer-container();
background-color: #000000;
color: yellow;
.header {
@include span-columns(12);
background-color: #999999;
}
.navigator {
@include span-columns(5);
background-color: #333333;
}
.footer {
@include span-columns(12);
background-color: #666666;
}
}
src/views/app/index.js
export default {
template: require("./template.html")
}
src/views/app/template.html
<div class="header">ヘッダー</div>
<div class="navigator">ナビゲーター</div>
<div class="contents">コンテンツ</div>
<div class="footer">フッター</div>
ここでnpm run hot
を実行してみる。
ログを見てエラーが出ずにwebpack: bundle is now VALID.
と表示されたら↓URLで確認
http://localhost:8080/
CSSが効いてれば多分問題なし。
停止するときはctrl+c
ついでにnpm run build
でビルドして、buildディレクトリに吐き出されるソースもちょろっと確認
テストを作る
npmまわり準備
npm i -D function-bind jasmine-core karma karma-jasmine karma-phantomjs-launcher karma-spec-reporter karma-webpack phantomjs phantomjs-polyfill phantomjs-prebuilt
やろうとしていること
- ナビゲーター部分をコンポーネントにしてそれをテストする
components/navigator/index.js
export default {
template: require("./template.html"),
data() {
return {
'calcResult': 0,
'value1': 0,
'value2': 0
}
},
methods: {
init(value1, value2) {
this.value1 = value1;
this.value2 = value2;
},
doCalc() {
this.calcResult = Number(this.value1) + Number(this.value2);
}
}
}
components/navigator/template.html
<div class="navigator">
<input type="number" v-model="value1" />
<span> + </span>
<input type="number" v-model="value2" />
<button @click="doCalc">calc</button>
<span class="result" v-text="calcResult"></span>
</div>
views/app/index.js 書き換え
import Navigator from '../../components/navigator'
export default {
template: require("./template.html"),
components: {
Navigator
}
}
views/app/template.html 書き換え
<div class="header">ヘッダー</div>
<navigator></navigator>
<div class="contents">コンテンツ</div>
<div class="footer">フッター</div>
karma.conf.js
// webpackの設定でテストするのに都合の悪い部分を上書き ここから
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var htmlWebpackPlugin = new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/assets/html/index.template.html'
});
var webpackConf = require('./webpack.config.js');
delete webpackConf.entry;
webpackConf.plugins = [
htmlWebpackPlugin,
new ExtractTextPlugin('./css/app.css', {disable: false})
];
// webpackの設定でテストするのに都合の悪い部分を上書き ここまで
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: './',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'./test/unit/index.js'
],
proxies: {
// 静的なファイルで必要なものはここに登録
//'/assets/images/hoge.svg': './src/assets/images/hoge.svg'
},
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'test/unit/index.js': ['webpack'],
'src/**/*.js': ['webpack'],
},
webpack: webpackConf,
webpackMiddleware: {
noInfo: true
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['spec'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
};
webpackの設定の書き換えはpluginsのCommonsChunkPluginが絡んでくるとkarmaちゃんが動いてくれなくなっちゃうから
何かもっと良い解決方法があるといいな
test/unit/index.js
Function.prototype.bind = require('function-bind');
var testsContext = require.context('.', true, /\.spec$/);
testsContext.keys().forEach(testsContext);
test/unit/navigator.spec.js
import Vue from 'vue';
import Navigator from 'components/navigator';
describe('navigatorのテスト', () => {
Vue.config.debug = true;
Vue.options.replace = false;
const vm = new Vue({
template: '<div><navigator></navigator></div>',
components: { Navigator }
}).$mount();
it('test sample', () => {
expect(vm.$el.querySelector('.result').textContent).toBe('0');
});
it ('calc test', (done) => {
vm.$children[0].init(100, 50);
vm.$children[0].doCalc();
expect(vm.$children[0].$data.calcResult).toBe(150);
// まだ反映していないはず
expect(vm.$el.querySelector('.result').textContent).toBe('0');
vm.$nextTick(() => {
// 反映されるはず
expect(vm.$el.querySelector('.result').textContent).toBe('150');
done();
})
});
});
ここで、npm run test
もしくはnpm test
を実行してみる。
navigatorのテスト
✓ test sample
✓ calc test
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 2 of 2 SUCCESS (0.003 secs / 0.003 secs)
このようなログがでたら成功。
そろそろイラレを卒業したいと
特に絵を描くわけじゃないんだけどね!
Sketch使い方メモ
ベクターツールを使う
ベクター編集モードに切り替える
- insert -> Vectorを選ぶ。ショートカットは「v」
- 既存のパスをダブルクリック
- 編集を終える -> 右にあるfinish Editingボタンを押す。もしくは「a」ボタン押したりすると解除される
ポイントの編集
- 追加:ベクター編集モードの時にポイント追加したいパスをクリック
- 削除:削除したいポイント選択中にdeleteボタン
ポイントから出てる足の編集
- 片方だけ編集-> commandボタンを押しながら編集
- リセット-> ポイントをダブルクリック
パスを閉じる、開ける
- 右にある「Open Path」「Close Path」ボタンを押す。(選択中のパスがどういう状態かでボタン名が切り替わる)
文字をパスにして編集
- 挿入した文字を選択して右クリック「convert to outlines」を選んでアウトライン化
- アウトライン化した文字をダブルクリックでベクター編集モードに->編集可能
typescriptでvueのプロジェクトを作るときに
素敵。最高。 qiita.com
よくわからない点
- watchの書き方どうなるんだろ?
- vuexとか組み込むのはやっぱつらいのかな?つか普通にmvc的にしてコールバック登録する形でいいか
- data()の中にあるやつをもう一回宣言する必要があるのなんとかならないかな?
- tsd非推奨でtypings?使えって言われたけど、まだちゃんと調べてないからよくわからない
あと感じたこととして、
intellijでは動作遅くてやってられない。
試しにvisual studio code使ってみたら軽すぎて鼻水でた。
typescript使うならこっちかなー。
プロジェクトの雛形2016年2月版!
前回雛形との違い
- index.template.html.
- Split files vendor.js app.js and app.css.
- To compress the source using the UglifyJs.
- Use bourbon and bourbon-neat.
setup directory and node_modules
mkdir -p {build,test/{unit,e2e},src/{components,views/app,filters,directives,assets/{js,style,images,html}}}
npm init -y
npm i -g webpack webpack-dev-server mocha babel-core babel-loader power-assert node-sass
npm i -S vue vuex
npm i -D babel-core babel-loader webpack style-loader css-loader node-sass sass-loader html-loader mocha mocha-loader babel-plugin-add-module-exports babel-plugin-transform-runtime babel-polyfill babel-preset-es2015 babel-preset-stage-2 babel-runtime file-loader url-loader espower-babel power-assert lodash
npm i -D extract-text-webpack-plugin html-webpack-plugin@2
npm i -D node-bourbon node-neat
Please run with the "sudo" If the permission error has occurred
.babelrc
{
"presets": ["es2015", "stage-2"]
}
webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var contentBase = __dirname + '/build';
var cssLoader = ExtractTextPlugin.extract('style', 'css?sourceMap!sass')
var htmlWebpackPlugin = new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/assets/html/index.template.html'
});
var pkg = require('./package.json');
var vendor = Object.keys(pkg.dependencies);
var options = {
entry: {
app: ["./src/assets/js/app.js", "./src/assets/style/app.scss"],
vendor: vendor,
},
output: {
path: contentBase + '/',
filename: "js/[name].js",
contentBase: contentBase + '/build'
},
resolve: {
alias: {
vue: "vue/dist/vue",
lodash: "lodash"
},
modulesDirectories: ['node_modules', 'src/', 'src/assets/js/', 'src/assets/style/', 'src/views/', 'src/directives/', 'src/filters/', 'src/components/'],
// require()するときに拡張子を省略可能にします
extensions: ['', '.webpack.js', '.web.js', '.js']
},
devServer: {
contentBase: "./build",
},
module: {
preloaders: [],
loaders: [
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&minetype=application/font-woff"
},
{
test: /\.png$/,
loader: "url-loader?limit=100000"
},
{
test: /\.jpg$/,
loader: "file-loader"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
},
{
test: /\.scss$/,
loader: cssLoader
},
{
test: /\.html$/,
loader: "html"
},
{
test: /\.js(x?)$/,
loader: 'babel-loader?sourceMaps=true'
}
]
},
plugins: [
htmlWebpackPlugin,
new ExtractTextPlugin('./css/app.css', {disable: false}),
new webpack.optimize.CommonsChunkPlugin('vendor', 'js/vendor.js')
]
};
if (process.env.NODE_ENV === 'production') {
var defplugin = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
});
var minplugin = new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
});
options.plugins.push(defplugin);
options.plugins.push(minplugin);
options.plugins.push(new webpack.optimize.OccurenceOrderPlugin());
}
module.exports = options;
package.json (scripts property)
"scripts": {
"hot": "webpack-dev-server -d --inline",
"build": "NODE_ENV=production webpack --progress --hide-modules",
"test": "mocha --compilers js:espower-babel/guess test/unit",
"e2e": "mocha --compilers js:espower-babel/guess test/e2e"
},
src/assets/html/index.template.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テンプレート</title>
</head>
<body>
<app>ここにAPPが入ります</app>
</body>
</html>
src/assets/js/app.js
import Vue from 'vue';
import App from '../../views/app'
require('../style/app.scss');
new Vue({
el:'body',
components: {App}
});
src/assets/style/app.scss
@import "~bourbon";
@import "~bourbon-neat";
body {
@include outer-container();
background-color: #000000;
color: yellow;
.header {
@include span-columns(3);
background-color: #999999;
}
.navigator {
@include span-columns(5);
background-color: #333333;
}
.footer {
@include span-columns(12);
background-color: #666666;
}
}
src/views/app/index.js
export default {
template: require("./template.html")
}
src/views/app/template.html
<div class="header">ヘッダー</div>
<div class="navigator">ナビゲーター</div>
<div class="contents">コンテンツ</div>
<div class="footer">フッター</div>