※スマホ対応はしてません。
CertbotでLet’s Encryptを使ってHTTPS対応しました。今後はhttpsのURLであれこれしていこうと思ってます。
めっちゃ簡単だった。びっくりした。そのうち記事にします。
WordPress関連でも実はサーバ変更して再構築したんだけど色々まだ足りてないのがあって（画像編集とか）、諸々ぼちぼちやっていこうかと思ってます。なんか気が付いたらめっちゃアクセス数減ってたし。年始に何があったんだろ。
ひとまずお知らせまで。
Vue.js始めるおれおれアドベントカレンダー2016 – 17日目分（28日公開）
これこれ。
vue-webpack-boilerplate自体は特にインストール作業はなさそうなんだけど、その前にvue-cliが必要です。
$ npm install -g vue-cli
これでコマンドラインから vue コマンドが使えるようになります。 “vue-cli” はそのコマンドをインストールする的なやつで、ブラウザが読み込む vue.js とは別物。
出力結果は省略してるけど、こんな感じ。
$ vue init webpack my-project $ cd my-project $ yarn install
開発サーバー起動。
$ npm run dev Listening at http://localhost:8080
URLを開くと最初のページが出てきます。やったね。
Ctrl+C で終了。
大丈夫そうなので、今回生成されたファイルを見ていきます。
Vue.js始めるおれおれアドベントカレンダー2016 – 18日目
作りましたというか、まだもうちょっといじろうと思ってるんだけど、動きはします。
Reactもそうなんだけど、オブジェクトを入れ子にしてく書き方、なかなか面倒じゃないですか。そういうのをなんかこう装飾子みたいにさらってできねえかなーそういやテンプレート文字列は改行も含められるんだなーあれでやれたらいいなーと考えて作ってみました。
Vueの機能として、型等を指定することができます。
こんな感じ。
const MyComponent = {
props: {
simpleString: { type: String },
requiredNumber: { type: Number, required: true },
defaultBoolean: { type: Boolean, default: true },
validatedObject: {
validator: function (value) {
return (value.flag1 && value.flag2)
}
}
}
}
さっきの指定を、だいたいこう書けるようになります。
const pt = require('vue-props-template')
const MyComponent = {
props: pt`
string simpleString
required number requiredNumber
boolean defaultBoolean = true
`
}
どうでしょうか、こういうの。
あとは validatedObject をどうしようかなあというところです。現状こんなん。
const pt = require('vue-props-template')
const MyComponent = {
props: pt.extend(pt`
object validatedObject
`, {
validatedObject: {
validator: function (value) {
return (value.flag1 && value.flag2)
}
}
}
}
}
個人的にはあんな風に書けたら便利だと思ってるんだけど、他の人はどうなんだろ。まあ自分で使う用でも構わないんだけど。
ちょっと探して見つからなかったけどありそうで怖い。
validator の扱い埋め込み値 ${…} の中に関数を書くのってどうかなあ。別に良いかなあ。例えばこういうの。
props: pt`
validatedObject as ${function (value) {
return (value.flag1 && value.flag2)
}}
`
あーこういうのも悪くないかなあ。どうかなあ。
この場合、他の「型 名前」の順の書き方と違ってきちゃうけど、んーまあ良いか。
Vue本体を参考に、ブラウザで読み込んでもNode.js（vueify）経由でも動くようにはした。でも今はそれを直接元コードに書いてて、なんかこう「ビルド」をしてそういうのを出力するやり方の方が良いだろうか。
あとバージョン管理も実はあんまりよくわかってない。semverは良いんだけど、なんか手動でぽちぽちやるんじゃなくてnpm scriptに更新コマンドも用意して、なんて話を前聞いた気がする。
これ全部終わったらv1.0.0ということにしようかなと思ってます。
validator の扱いVue.js始めるおれおれアドベントカレンダー2016 – 16日目分（24日公開）
アニメーション付きのナビバーを作ってみました、簡単でした。やったね。
location.hash を監視して情報更新簡単に作れたは良いんだけど、最後のやつどうしようかなと。
最初に書いたコードはこう。
<nav> <a href="#">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> <span :style="underlineStyle"></span> </nav>
const store = require('./store.js')
const hashes = ['', '#about', '#contact']
module.exports = {
data () {
return store.state
},
computed: {
underlineStyle () {
const itemWidth = 100
const left = itemWidth * hashes.indexOf(this.hash)
return {
transform: 'translateX(' + left + 'px)'
}
}
}
}
これで全然動くんだけど、疑問点が二つ。
'', '#about', '#contact' をHTML側と共有しているの、どうにかならんかな100 をCSS側と共有しているの、どうにかならんかなjQueryであれば実際の要素を見てあれこれするんだけど、Vueはそうはしないじゃないすか。普通。
$refs を使う？とか言いつつ要素を見てあれこれするやつ、使ったらできるにはできた。
<nav ref="list"> <a href="#">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> <span :style="underlineStyle"></span> </nav>
computed: {
/**
* 項目の幅の実測値を返す。
*/
itemWidth () {
const elList = this.$refs.list
const elItem = elList.firstElementChild
return elItem.clientWidth
},
/**
* 項目の `href` からhash候補値を得る。
*/
hashes () {
const elList = this.$refs.list
const elItems = elList.children
const hashes = Array.from(elItems).map(elItem => {
let hash = elItem.getAttribute('href')
if (hash === '#') {
hash = ''
}
return hash
})
return hashes
},
underlineStyle () {
let left
// 最初のDOM構築の際には当然underlineStyleは呼ばれるが、
// 最初だからDOMがまだないので、 `$refs` が使えない。
if (this.$refs.list) {
left = this.itemWidth * this.hashes.indexOf(this.hash)
} else {
// `hash` 変更時にキャッシュ値を更新するよう、
// ここで呼んで記憶してもらう
left = this.hash.length * 0
}
return {
transform: 'translateX(' + left + 'px)'
}
}
},
うわあ、すごく危険な香りがする。
実際公式ガイドにもやめてねって書いてあるし。
$refsはコンポーネントが描画された後にのみ追加されます。そしてそれはリアクティブではありません。直接子コンポーネントを操作するための最終手段としての意味しかありません。テンプレートまたは算出プロパティの中での$refsの使用は避けるべきです。
うん。
テンプレートまたは算出プロパティの中での
$refsの使用は避けるべきです。
そう思います。
……マウント……ライフサイクル……ん？
module.exports = {
data () {
return {
itemWidth: 999,
hashes: [],
state: store.state
}
},
mounted () {
const elList = this.$refs.list
const elItems = elList.children
this.itemWidth = elItems[0].clientWidth
this.hashes = Array.from(elItems).map(elItem => {
let hash = elItem.getAttribute('href')
if (hash === '#') {
hash = ''
}
return hash
})
},
computed: {
underlineStyle () {
const left = this.itemWidth * this.hashes.indexOf(this.state.hash)
return {
transform: 'translateX(' + left + 'px)'
}
}
}
}
なるほど、こういう感じか。これなら良さそう。