動かざることバグの如し

近づきたいよ 君の理想に

vuexメモ

自分にはNuxtJSは早すぎた(てきとう

以下のようなsrc/App.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'nyaa',
    };
  },
};
</script>

これは今まで。これをstoreで管理できるように

yarn add vuex

でsrc/main.jsはデフォルトだと以下のようになっているはず。

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    msg: 'nyaa',
  },
})

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

に変更

でApp.vueを以下に変更

<template>
  <div>
    <h1>{{ this.$store.state.msg }}</h1>
    {{ msg }}
  </div>
</template>

<script>
export default {
  /*data() {
    return {
      msg: 'nyaa',
    }
  },
  }*/
}
</script>

これでstoreから参照できるようになる

事実、今までのようにthis.msgのようにアクセスしようとしても

Property or method "msg" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

とエラーになる。

取得

this.$store.state.msg

変更

this.$store.state.msg = 'changed'

はダメで必ずmutation(操作)を経由しなければならない

さっきのmain.jsのstoreにmutationを追加して

const store = new Vuex.Store({
  state: {
    msg: 'nyaa',
  },
  mutations: {
    setMessage(state, payload) {
      state.msg = payload
    }
  }
})

変更するときはコミット

this.$store.commit('setMessage', this.$store.state.msg+'!')

全体で言うと

<template>
  <div>
    <h1>{{ this.$store.state.msg }}</h1>
    <button v-on:click="increaseMsg">click</button>
  </div>
</template>

<script>
export default {
  methods: {
    increaseMsg: function() {
      // NG
      /*this.$store.state.msg += '!'*/
      this.$store.commit('setMessage', this.$store.state.msg+'!')
    }
  }
}
</script>

になる。が、実際にはthis.$store.commit()を呼び出すことは殆ど無い。(らしい)

なぜか。それはmutations関数の中は同期的でなければならいから。つまり非同期処理は絶対にかけない。

じゃあ非同期にstoreの処理変更できないやんけ、ってなる。そこでactionsという別の仕組みがある。

Vuex.Store内に以下を追記

  actions: {
    saveMessage(context, payload) {
      context.commit('setMessage', payload)
    },
  }

で呼び出すときは以下

this.$store.dispatch('saveMessage', this.$store.state.msg+'!')

全体図

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    msg: 'nyaa',
  },
  mutations: {
    setMessage(state, payload) {
      state.msg = payload
    }
  },
  actions: {
    saveMessage(context, payload) {
      context.commit('setMessage', payload)
    },
  }
})

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})
<template>
  <div>
    <h1>{{ this.$store.state.msg }}</h1>
    <button v-on:click="increaseMsg">click</button>
  </div>
</template>

<script>
export default {
  methods: {
    increaseMsg: function() {
      this.$store.dispatch('saveMessage', this.$store.state.msg+'!')
    }
  }
}
</script>

Chrome拡張機能作ったけど審査通らなかった話

てかお前審査してたんかよ。。。(

経緯

意外に知られていないが、Kindleはアプリで見る以外にKindle Cloud Readerというブラウザ版が存在する。

つまり https://read.amazon.co.jp/ にアクセスするとブラウザ上からKindleの本/漫画が読める。

が、タブで開くとブックマークバーとかアドレスバーとか邪魔。そこでChrome拡張機能でフルスクリーン表示する。そこで「Open Kindle Cloud Reader」という拡張機能を作った。アイコンクリックするとKindleのウィンドウがフルスクリーンが開くだけ。

こんなシンプルな拡張機能他にあるだろうかと思いつつZipをアップしたのだが後日こんなメールが

Dear Developer,

Your Google Chrome item, "Open Kindle Cloud Reader," with ID: ********* did not comply with our policies and was removed from the Google Chrome Web Store.

Your item did not comply with the following section of our policy:

"Do not post repetitive content.
Do not use irrelevant, misleading, or excessive keywords in app descriptions, titles, or metadata.
Do not attempt to change the placement of any Product in the store or manipulate any Product ratings or reviews by unauthorized means, such as fraudulent installs, paid or fake reviews or ratings, or offering incentives to rate Products.
Do not post an app where the primary functionality is to link to a website not owned by the developer.
Do not post an app where the primary functionality is to install or launch another app, theme, or extension. For example, if your app’s primary function is to launch a desktop app that the user has already installed, that is not allowed. Another example is a packaged app that just launches a website.
Your app must comply with Google's Webmaster Quality Guidelines."

If you'd like to re-submit your item, please make the appropriate changes to the item so that it complies with our policies, then re-publish it in your developer dashboard. Please reply to this email for issues regarding this item removal.

*Please keep in mind that your re-submitted item will not be immediately published live in the store. All re-submitted items undergo a strict compliance review and will be re-published if the item passes review.

*Important Note
Repeated or egregious violations in the store may result in your developer account being banned from the store. This may also result in the suspension of related Google services associated with your Google account. All re-submitted items will continue to be subject to Chrome Web Store policies and terms of service.

Thank you for your cooperation,
Google Chrome Web Store team

どうもシンプルすぎたのが逆に駄目だったぽい。Kindleの初秋者じゃない人間がKindle語ったアプリケーション作るなよ、と。

てか審査してたことに驚き。あんなにスパイウェアまみれだったからバリデーションチェック程度だと思ってたは

ということでAmazonさんお願いだから早く公式Chrome拡張機能 for kindle作って(懇願

ActionMailerのメール送信ログを出力する

久々のRailsネタ

今回やりたいのはActionMailer経由でのメール送信時に送信先のログを吐きたい。

ActionMailerにはObserverというトリガー?的な機能があるのでそれにhookする感じで

まずはログ出力先の設定 config/application.rbに追記

config.mail_logger = Logger.new("log/mail_#{Rails.env}.log")

次にObserverクラスを適当に作る 最終的にはmailクラスを引数に取るdelivered_emailが走るのでここでログを吐く

# config/initializers/email_log_observer.rb
class EmailLogObserver

  def delivered_email(email)
    msg = "from: #{email.from.join(',')} to: #{email.to.join(',')} subject: #{email.subject}"
    Rails.application.config.mail_logger.debug(msg)
  end
end

で、最後にapp/mailers/application_mailer.rbのApplicationMailer宣言後に一行追記

class ApplicationMailer < ActionMailer::Base
(略)
end

ActionMailer::Base.register_observer(EmailLogObserver.new)

これでメール送信時にlog/mail_development.logにログが流れるはず

参考リンク

Amazonのアカウント停止メールが来てた話

※ 詐欺メールです

Amazonからアカウント停止メールが

普段使ってないメルアドのBOX見てたらAmazonからアカウント停止メールが

メールのタイトルは「Amazon Team- 尊敬する名無し太郎 --リスクのため、お客様のアカウントは無効になっています。」 (実際には本名)

f:id:thr3a:20180508134130p:plain

一瞬え、ってなったがそもそもこのメルアドをAmazonと紐付けてないし、日本語もおかしい。「リカバリアカウント」のリンク先もAmazonJPっぽいURL。100%フィッシング詐欺だわ

この手の詐欺メールは今に始まったことじゃないけど

www.itmedia.co.jp

www.itmedia.co.jp

けど気になるのがメール本文の名前が自分の本名だったこと。どこから流出したんだろう。。

nuxt ganerateで生成するディレクトリを変更する

nuxt.jsで静的ホスティングしたいときはnuxt ganerateコマンドを叩く(実際にはnpm run generate)

これでdistディレクトリ内に生成されるが、都合的に他のディレクトリに出力したい場合

やり方

nuxt.config.jsに以下追加

module.exports = {generate: {
    dir: "docs"
  }
}

これでdocs以下に生成されるようになった。

参考リンク