鈍足ランナーのIT日記

走るのが好きな5流のITエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

マカレル使うか

以前インストールして全く使っていなかったのでGratanリリースしたので
監視して見ますか。


soudai.hatenablog.com

mackerel-agentのインストール

nginxのビルド

cd nginx-x.x.x   // ソースを解凍したディレクトリ
./configure --prefix=/usr/local/nginx --with-http_ssl_module --without-http_uwsgi_module --with-http_realip_module --add-module=./ngx_aws_auth --with-debug --with-http_stub_status_module
make
make install

nginx_statusの有効化

nginx.confの編集

        location /nginx_status {
            stub_status on;
            access_log off;
            allow 127.0.0.1;
            deny all;
        }

なんかグラフでない

qiita.com

なんかnginxのプラグインの設定かくとエージェントが起動失敗する

/etc/mackerel-agent/mackerel-agent.confのapi_keyを記述するいちが[plugin.metrics.nginx]より
後ろだったためのようでした。前の方にapi_keyの記述を移動して上げたら無事起動できました。

副業している(したい)エンジニア交流会に参加しました

凄いエンジニアさんが登壇していて
自分の能力のなさに辟易。
もう人と比較するのは、しないようにしよう。がっかりするだけだ。

とにかく、楽しそうなことにJOINして
スキルを上げたりするのが一番だ。
ストレスのお話も出ていたように。
楽しければ、時間を忘れる。

そんな感じでした。

そうそう、副業するならば、時給制が良いという検知を得ました。

お金を稼ぐのを目的とすると、スキルの習得が2の次になりかねない。
副業はオープンにしている。
開業どどけをとりあえず出してしまう

などなど・・・

vuetify.js v-toolbar 画面サイズを小さくした時にボタンが消えるので何とかしたい

vuetify.jsのv-toolbarサンプルでは画面の横幅を小さくして行くと
ボタンが消えてしまい。操作できなくなる。
ハンバーガーボタンで選べるようにしたいのですが・・・

vuetifyjs.com

ググりましたら、下記のサンプルを発見しました。
Vue Router + Vuetify JS Example - Plunker

これを参考にして実装して見ます。

Vue-i18n safariでlanguage取得の挙動がja-JP

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.css'
import VueI18n from 'vue-i18n'
import { store } from './store/store.js'

Vue.use(Vuetify)
Vue.use(VueI18n)

const data = require('./i18n/message.json')

const language = (window.navigator.languages && window.navigator.languages[0]) ||
            window.navigator.language ||
            window.navigator.userLanguage ||
            window.navigator.browserLanguage
// 言語の設定
const i18n = new VueI18n({
  locale: language,
  messages: data
})

console.log(language)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  store: store,
  i18n: i18n,
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  beforeCreate () {
    this.$store.commit('initializeStore')
  }
})

chrome,firefoxはjaが返ってくる。
safariはja-JPが返ってくる

頭2文字を渡すように修正

ケチなおじさんがWebアプリを作ってみた

こんにちは。
dokechinといいます。

HNの名前にもしているように家族からケチと呼ばれています。
私は、2012年からケチを卒業すべくWebアプリを書いている
理系エンジニアの40代の冴えないおじさんです。(クソブロガー)

未だに出したアプリは全くヒットしておりません。はい。
むしろ2012年よりヒットする作品を作る敷居はどんどん
高くなっていると感じます。

そんな、ケチなおじさんが懲りずにアプリケーションをリリースしました。
このアプリの前身となる同名のアプリは2013年にリリースしていましたが
お蔵に入れて作り直しました。

どんなアプリって単に、グラム単価をメモするツールなんです。
gratan.dokechin.com

買い物するときに気にするグラム単価なんですが
同一商品で価格を比較するのは容易いのですが
乾燥わかめのような商品、つまり内容量がメーカーによってまちまち
な商品の価格比較となると、記憶力、計算力が問われて人間がするには大変な作業となります。
また、店ごとに違う割引設定を加味して単価比較をするとなると、
日商そろばん1級レベルの暗算力が必要になることでしょう。

そんな課題に答えるアプリとなっています。

今回使った技術はVue+Vuetify+Vuex+WPA+LocalStorageです。
vue-cliの強力な支援のおかげで今風の開発環境が手に入れられたのは幸せです。
データは全てLocalStorageに保存する仕様のため、(通信が発生しない)
サーバーサイドがないアプリとなっています。
環境にも優しいですね。

買い物の際に利用していただけると嬉しいです。
要望などありましたら、こちらまでお願いします。
github.com

どうせマネタイズもできないだろうし。オープンソースで行きますよ。

LocalStorageには容量の制限があるので、大量に登録しちゃうと
保存不能になることでしょう!!

vuetify.jsツールバーで選択したボタンの状態をトグル状態にしたくない場合

vueのルーターを使って,vuetify.jsでツールバーを作成。
ロゴ部分はイメージを使ったボタンにしました。
ロゴを選択した場合はボタンをトグル状態にしたくない。以下だとカッコ悪い。

f:id:kechiya:20180321155306p:plain

そんな場合には,active-classを無指定にすればいいとのことです。

Buttons change color when used as vue-router link (.btn--active) · Issue #1947 · vuetifyjs/vuetify · GitHub

    <v-toolbar app>
      <v-toolbar-title class="mr-5">
        <v-btn flat to="/" active-class><img src="./assets/logo.png"/></v-btn>
      </v-toolbar-title>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn flat to="/shop">{{ $t("shop") }}</v-btn>
        <v-btn flat to="/discount">{{ $t("discount") }}</v-btn>
        <v-btn flat to="/item">{{ $t("item") }}</v-btn>
        <v-btn flat to="/list">{{ $t("gratan") }}</v-btn>
      </v-toolbar-items>
    </v-toolbar>