Kubernetes の Service はどうやって動いているのか
タグ：kubernetes, kube-proxy, iptables, docker
iptablesってファイアウォール設定で使うものだと思っていたけど、dockerやkubernetesのネットワーク動作のために割と重要なアイテムなんだな。
緊急事態宣言 第4回 東京都７月１２日から８月２２日まで
tag: 武漢肺炎
ここの所感染拡大してたしな。
18,281bytes
実効再生産数は1.09と拡大中。東京だけじゃなくて全国平均でコレなのでキツイ。
33,969bytes
沖縄は落ち着いてきたけど、東京と神奈川と千葉がヤバイ。
40,446bytes
少なくとも１回は接種した人数。日本と韓国。日本は7月以降からワクチン供給が少なくなる説があるのでどうなるか。
p.s.
まさかのペースダウン呼びかけｗ貴様らの頑張り過ぎだ！
vue でHTMLのFORMのファイルアップロードする
tag: vue, wiki
vue.jsでHTML formの input type=file を取り扱う方法のメモ。
webchat画面ではファイルのドラッグ＆ドロップや画像イメージのペーストをサポートしているのだが、 スマホブラウザからはファイルを選択してアップロードする方が操作が楽なので追加。
vue.jsでは input type=file の内容は v-model では拾えないので、changeイベントで変化をキャッチする。
HTML側。
<input type="file" multiple="multiple" class="inputFileDialog" @change="handleFormFileUploadChange" />
vue側のメソッド。
// ----------------------------------------------------------------------
// フォーム上のinput type=file が操作された時の処理
// ファイルが選択された場合処理する。ファイルは複数選択可能なのでループする。
handleFormFileUploadChange: function(e) {
const files = e.target.files;
if ( files ) {
if ( files.length > 0 ) {
// 送信用フォームデータ作成
var formData = new FormData();
// ファイルは複数選択可能なのでループする。
for (var file of files) {
// ファイルタイプをチェックしながらフォームにデータを追加
if (file.type.match("image.*")) {
this.vue_message = "from vue: image file dropped.";
formData.append("note", file);
}
}
if (formData.has("note")) {
formData.append("op", "imageupload");
// axiosでpost
axios.post("http://hogehoge.example.com/api", formData)
.then(function(response) {
// 送信成功した場合の処理
})
.catch(function(error) {
// 送信エラー時の処理
this.vue_message = "post error.";
});
}
}
}
},
vagrant (provider Hyper-V) のVMは、ブルースクリーンとかブレーカー停電で消失する
tag: vagrant
vagrant (provider Hyper-V) のVMは、ブルースクリーン発生とかブレーカー停電でVMの内容ごとロストする。
PSO2NGSが時々ブルースクリーンを引き起こすので、そこそこの頻度でVM内容ロストしてて不便だ。
WSL2のVMは内容ロストしてないっぽいのに。何が違うんだろう？
現在の環境：Windows 10 21H1 , virtualbox 6.1.22 , vagrant 2.2.17
ワクチン接種してきた
tag: 武漢肺炎
持病持ち枠でファイザーのワクチン打ってきた（一回目）。
注射自体は痛くなかった（たぶん採血の方が痛い）が、その後はちと腕が痛いｗｗ
(注射当日と翌日は腕が痛い感じ。2日後は気にならない。)
(当日から4日後まではちょっと体がだるい感じが残る印象。)
接種回数累計は7000万回を超えたらしい。
1週間で1000万回接種ペースで推移しているので、2億5000万回 - 7000万回 = 1億8000万回 = あと 18週間(4.5ヵ月)で打ち終わる計算。
打たないヤツ結構多い的な展開があれば、希望者が打ち終わるまでもうちょい早くなる。
vue-cli(@vue/cli) の vue.config.js の中に webpack の設定を書く方法
tag: vue, @vue/cli, webpack, wiki
@vue/cliを使っている場合、webpackの姿は見えない。 @vue/cli内部ではbuild/serve用途でwebpackが使われているけど。
webpackの設定ファイルを書かなくても良いのは利点だが、色々細かい設定したい場合は vue.config.jsの中に configureWebpack: { } を書いて、その中に webpack 用の設定を書くらしい。
そろそろVue 3.x系に移行するかなと思って環境整備の試行中。 意外に vue-cli が古いバージョンの npm を指定してプロジェクトを作ってくるのでどうしたものか悩み中。 (たとえば、vue@nextは3.0.0が、eslintは6系が指定される)
webpackを使って自作ライブラリを作成する方法
tag: webpack, library, wiki
参考用にメモ。
ちなみに、@vue/cliを使うと、以下のコマンドでvue本体を含むライブラリが作成できる。
npx vue-cli-service build --mode development --target lib --inline-vue --name libkjwikig src/main/typescriptvue3/libmain.ts
ライブラリ用のwebpackのconfigはvue-cli-serviceが適当に内部で自動生成してくれる模様。
ファイルサイズは800KBを超えるので、これはちょっと利用しづらいかもｗ
vue3用環境構築シェル node-vue3-setup-for-kjwikig-proj.sh
tag: vue3, vue, @vue/cli, wiki
連休なのでvue3用の環境生成するシェルを作成。
まだオレwikiには適用してないけど、これで環境構築できたかな？
vue create hello-world で生成された package.json を見ながらシェルで再現。適当に最新版を使うようにしてみた。
このシェルにはアプリ作成モードとライブラリ作成モードがあるけど、ライブラリ版は出力ファイルサイズが大きいので使わない予感。
シェルの中で使っている yamlsort コマンドは https://github.com/george-pon/yamlsort にある。jsonのmergeに使っている。
npx vue-cli-service lintの検索範囲が広くて vue.config.js のインデントにまで苦情出してくるのに草。
p.s.
ちと更新。lodash用のtype定義を追加。eslintrcに const self = this; みたいな逃げはエラーとしない設定を追加。
#!/bin/bash
#
# nodejs vue 3 ボイラーテンプレート
#
# 1. bash ./node-vue3-setup-for-kjwikig-proj.sh install build # 新規 npm モジュールインストール & npm build
# 2. bash ./node-vue3-setup-for-kjwikig-proj.sh ci build # package-lock.jsonに従ったバージョン指定インストール & npm build
# 3. bash ./node-vue3-setup-for-kjwikig-proj.sh install none # 新規 npm モジュールインストールのみ実施。ビルドはしない。
# 4. bash ./node-vue3-setup-for-kjwikig-proj.sh none build # 各種ファイルを作成しビルドだけ行う。
#
# 第一引数は install / ci / none
# 第二引数は build / prod / lib-build / lib-prod / lint
#
set -e
function f-node-vue3-setup-for-kjwikig-proj() {
# デフォルト動作
MODE=install
MODE2=build
# 引数解析
if [ -n "$1" ]; then
MODE=$1
fi
# 引数解析
if [ -n "$2" ]; then
MODE2=$2
fi
# install
if [ x"$MODE"x = x"install"x ]; then
# クリーニング
rm -rf node_modules
rm -rf package.json
rm -rf package-lock.json
set -x
npm init --yes
# dependencies
npm install --save core-js
npm install --save "vue@next"
npm install --save axios
npm install --save lodash
# dev dependencies
npm install --save-dev "@types/lodash"
npm install --save-dev "@typescript-eslint/eslint-plugin"
npm install --save-dev "@typescript-eslint/parser"
npm install --save-dev "@vue/cli-plugin-babel"
npm install --save-dev "@vue/cli-plugin-eslint"
npm install --save-dev "@vue/cli-plugin-typescript"
npm install --save-dev "@vue/cli-service"
npm install --save-dev "@vue/compiler-sfc"
npm install --save-dev "@vue/eslint-config-prettier"
npm install --save-dev "@vue/eslint-config-typescript"
npm install --save-dev "eslint"
npm install --save-dev "eslint-plugin-prettier"
npm install --save-dev "eslint-plugin-vue"
npm install --save-dev "prettier"
npm install --save-dev "typescript"
# global
npm install --save-dev @vue/cli
npm install --save-dev @vue/cli-service-global
set +x
fi
# ci
if [ x"$MODE"x = x"ci"x ]; then
# クリーニング
rm -rf node_modules
# package-lock.jsonに従ってバージョン指定でパッケージをインストール
npm ci
fi
# edit package.json npm scrits
echo "modify package.json npm scripts"
cat > override-1.json << "EOF"
{
"scripts": {
"serve": "vue-cli-service serve --mode development",
"dev": "vue-cli-service build --mode development --fix --watch",
"build": "vue-cli-service build --mode development --fix",
"prod": "vue-cli-service build --mode production --fix",
"lib-build": "vue-cli-service build --mode development --target lib --inline-vue --name libkjwikig src/main/typescriptvue3/libmain.ts",
"lib-prod": "vue-cli-service build --mode production --target lib --inline-vue --name libkjwikig src/main/typescriptvue3/libmain.ts",
"inspect": "vue-cli-service inspect",
"lint": "vue-cli-service lint"
}
}
EOF
yamlsort --input-output-file package.json --jsoninput --jsonoutput --override-file override-1.json
rm override-1.json
# vue.config.js の作成
cat > vue.config.js << "EOF"
// vue.config.js
/**
* @type {import('@vue/cli-service').ProjectOptions}
*/
module.exports = {
// options...
filenameHashing: false,
// srcの下にoutputすると、lintでwebpackされた中身がひっかかるので指定しない
// 省略時は distの下に出力される
// outputDir: "src/main/webapp/js",
runtimeCompiler: true,
// for webpack
configureWebpack: {
// アプリのメインとなるJavaScriptファイル（エントリーポイント）
entry: "./src/main/typescriptvue3/main.ts"
// output指定
// output: {
// ライブラリ名指定。vue-cli-service でライブラリモードを使う場合はコマンドラインで名前を指定するのでここでは不要
// library: "libkjwikig"
// }
},
// for webpack-dev-server
devServer: {
compress: true,
port: 9000
}
};
EOF
# tsconfig.json の作成
cat > tsconfig.json << "EOF"
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/main/typescriptvue3/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/main/typescriptvue3/*.ts",
"src/main/typescriptvue3/*.tsx",
"src/main/typescriptvue3/*.vue",
"src/main/typescriptvue3/**/*.ts",
"src/main/typescriptvue3/**/*.tsx",
"src/main/typescriptvue3/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
EOF
# .eslintrc.js の作成
cat > .eslintrc.js << "EOF"
module.exports = {
root: true,
env: {
node: true,
browser: true
},
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript/recommended",
"@vue/prettier",
"@vue/prettier/@typescript-eslint"
],
parserOptions: {
ecmaVersion: 2020
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
// const self = this , みたいなエイリアス逃げが禁止されているので、ここで許可する
"@typescript-eslint/no-this-alias": ["off"]
}
};
EOF
# .eslintignore の作成
cat > .eslintignore << "EOF"
dist
src/main/java
src/main/webapp
src/main/typescript
EOF
# .browserslistrc の作成
cat > .browserslistrc << "EOF"
> 1%
last 2 versions
not dead
EOF
# babel.config.js の作成
cat > babel.config.js << "EOF"
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"]
};
EOF
#
# サンプルソース投入
#
# アプリ用 index.html
cat > ./index.html << "EOF"
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue App</title>
<link href="./dist/js/chunk-vendors.js" rel="preload" as="script">
<link href="./dist/js/main.js" rel="preload" as="script">
<link href="./dist/css/main.css" rel="stylesheet">
</head>
<body>
<h2>app version</h2>
<div id="app"></div>
<h2>app function version</h2>
<div id="app2"></div>
<script type="text/javascript" src="./dist/js/chunk-vendors.js"></script>
<script type="text/javascript" src="./dist/js/main.js"></script>
<script>
console.log(exported_samplefunc("hoge"));
console.log("call start.");
const app2 = exported_createVue3AppSample("#app2");
console.log("call finish.");
</script>
</body>
</html>
EOF
# ライブラリ用 lib-index.html
cat > ./lib-index.html << "EOF"
<html lang="">
<head>
<title>Vue Library</title>
<link href="./dist/libkjwikig.umd.js" rel="preload" as="script">
</head>
<body>
<h2>library version</h2>
<div id="app"></div>
<script type="text/javascript" src="./dist/libkjwikig.umd.js"></script>
<script type="text/javascript">
// 関数呼び出しのサンプル
const msg = libkjwikig.exported_samplefunc("hoge");
console.log(msg);
// module 情報表示
console.log(libkjwikig)
// vue3 コンポーネント呼び出しを含む関数呼び出しのサンプル
const app = libkjwikig.exported_createVue3AppSample("#app");
</script>
</body>
</html>
EOF
mkdir -p ./src/main/typescriptvue3
cat > ./src/main/typescriptvue3/shims-vue.d.ts << "EOF"
/* eslint-disable */
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
EOF
mkdir -p ./src/main/typescriptvue3/components
cat > ./src/main/typescriptvue3/components/AppSampleComponent.vue << "EOF"
<template>
<div class="app-sample-component">
<hello-component msg="Welcome to Your Vue.js + TypeScript App" />
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import HelloComponent from "./HelloComponent.vue";
export default defineComponent({
name: "AppSampleComponent",
components: {
HelloComponent
}
});
</script>
<style></style>
EOF
mkdir -p ./src/main/typescriptvue3/components
cat > ./src/main/typescriptvue3/components/HelloComponent.vue << "EOF"
<template>
<div class="hello-component">
<p>{{ msg }} World!</p>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "HelloComponent",
props: {
msg: String
}
});
</script>
<style scoped>
p {
text-align: center;
}
</style>
EOF
mkdir -p ./src/main/typescriptvue3
if [ ! -f ./src/main/typescriptvue3/samplefunc.ts ] ; then
cat > ./src/main/typescriptvue3/samplefunc.ts << "EOF"
// sample function
export function samplefunc(argstr: string): string {
return "hello " + argstr;
}
import { createApp, App } from "vue";
import AppSampleComponent from "./components/AppSampleComponent.vue";
// sample vue function
export function createVue3AppSample(idstr: string): App {
console.log("Enter createVue3AppSample");
const app: App = createApp(AppSampleComponent);
app.mount(idstr);
console.log("Leave createVue3AppSample");
return app;
}
EOF
fi
mkdir -p ./src/main/typescriptvue3
if [ ! -f ./src/main/typescriptvue3/window.ts ] ; then
cat > ./src/main/typescriptvue3/window.ts << "EOF"
// 割と外道な定義。 window に Vue を追加することで、外部のJavaScriptから使えるglobalなModuleになる
// https://sansaisoba.qrunch.io/entries/NrmnZGUHE3xZhO3a TypeScriptでwindowにプロパティを追加する - sansaisoba's tech blog
// window.ts
interface MyWindow extends Window {
// eslint-disable-next-line
exported_samplefunc: any;
// eslint-disable-next-line
exported_createVue3AppSample: any;
}
declare let window: MyWindow;
export default window;
EOF
fi
mkdir -p ./src/main/typescriptvue3
if [ ! -f ./src/main/typescriptvue3/main.ts ] ; then
cat > ./src/main/typescriptvue3/main.ts << "EOF"
/*
* main.ts
*
* webpack のアプリ用の entry。
*/
import { createApp } from "vue";
import AppSampleComponent from "./components/AppSampleComponent.vue";
createApp(AppSampleComponent).mount("#app");
import window from "./window";
import { App } from "vue";
import { samplefunc, createVue3AppSample } from "./samplefunc";
function exported_samplefunc(str: string): string {
return samplefunc(str);
}
function exported_createVue3AppSample(str: string): App {
return createVue3AppSample(str);
}
window.exported_samplefunc = exported_samplefunc;
window.exported_createVue3AppSample = exported_createVue3AppSample;
/*
* end of file
*/
EOF
fi
if [ ! -f ./src/main/typescriptvue3/libmain.ts ] ; then
mkdir -p ./src/main/typescriptvue3
cat > ./src/main/typescriptvue3/libmain.ts << "EOF"
/*
* libmain.ts
*
* webpack の ライブラリ の entry。
*/
import { App } from "vue";
import { samplefunc, createVue3AppSample } from "./samplefunc";
export function exported_samplefunc(str: string): string {
return samplefunc(str);
}
export function exported_createVue3AppSample(str: string): App {
return createVue3AppSample(str);
}
/*
* end of file
*/
EOF
fi
echo ""
echo "--------------------------------"
echo "environment setup npm $MODE SUCCESS."
echo "--------------------------------"
echo ""
if [ -z "$MODE2" ]; then
echo " how to use npm scripts"
echo " npm run build (vue-cli-service build)"
echo " npm run prod (vue-cli-service build)"
echo " npm run lint (vue-cli-service lint)"
echo " npm run serve (vue-cli-service serve)"
echo ""
elif [ x"$MODE2"x = x"none"x ]; then
echo "skip npm run build. "
elif [ -n "$MODE2" ]; then
echo ""
echo "--------------------------------"
echo "npm run $MODE2"
echo "--------------------------------"
echo ""
npm run $MODE2
RC=$?
if [ $RC -eq 0 ] ; then
echo "npm run $MODE2 SUCCESS."
if [ x"$MODE2"x = x"build"x ] ; then
echo "start browser ./index.html"
start ./index.html
fi
if [ x"$MODE2"x = x"prod"x ] ; then
echo "start browser ./index.html"
start ./index.html
fi
if [ x"$MODE2"x = x"lib-build"x ] ; then
echo "start browser ./lib-index.html"
start ./lib-index.html
fi
if [ x"$MODE2"x = x"lib-prod"x ] ; then
echo "start browser ./lib-index.html"
start ./lib-index.html
fi
fi
fi
}
f-node-vue3-setup-for-kjwikig-proj "$@"
#
# end of file
#
オレwiki Vue 3系に載せ替え
tag: wiki, vue3
上の記事の書き方にならうと、以下のようになる。
Vue 3系で変えたところ
export default {
props: {
=>
import { defineComponent } from "vue";
export default defineComponent({
name: "EditModalComponent",
props: {
const app = new Vue({...})
app.hogeMethod();
=>
const app = createApp({...});
// mount で返却されるのがView Modelのインスタンス
// eslint-disable-next-line
const vm_any : any = app.mount("#app");
vm_any.hogeMethod();
Vue 3.x 系移植の感想。
緊急事態宣言 第４回延長戦 東京沖縄延長、埼玉千葉神奈川大阪追加 8/2から8/31まで
tag: 武漢肺炎
史上最大の第５波を受けて緊急事態宣言を追加。さてどうなるか。
21,119bytes
実効再生産数は1.46と過去最高をマーク。 凄いことになっている。 デルタ株の感染能力は絶大で、今までと同じ対策をしても抑えきれない。
36,800bytes
東京では125とか凄い値になっている。 大阪兵庫で医療崩壊した第4波では90くらいの数値だったと思うけど、手元に資料が無いのではっきりしない。 沖縄は130でさらにやばい。 病院とか救急車とか相当なことになっているハズだけど...。
42,807bytes
少なくとも１回は接種した人数。日本と韓国。 日本は7月後半から速度が落ちてきた。ワクチン輸入量の低下傾向がグラフに出てきた。