全国の北海道ファンの皆さんこんにちは．
早速ですがこの地名を読めますか？
幌筵1
当然読める日本人の方々はここから
漢字の読めない若い方々はここから
読めなかった非国民の方々はここからアクセスできます．
私は北方領土をロシア領と呼ぶ売国奴2なのでアクセスできませんでした．
北海道は広いですよね．いろんなところに行きますよね．
今回，北海道の自治体単位での訪問記録を付けられるWebサイトを作ったので紹介いたします．
要するに，経県値の丸パクリですね．
皆と共有して思い出話に花を咲かせましょうマウント取り合いまくりましょう．
Webサイト概要
日本が主権を失った島々が堂々と居座っていますが，日本の自治体としては正しく存在するのでセーフです．
使い方
- 北海道が表示されるので自治体を直接ポチポチするか，下の振興局別 のリストからポチポチします．
- 右下のTwitterアイコンをクリックして共有します．
最大レベルは925です．真の道産子目指して頑張りましょう．
赤に染まった北海道を目指しましょう．
ホストサービスはFirebase Hostingを使っています．
使用したライブラリはVue.jsです．初めて触りました3．
JSは素のまま書いています．トランスパイルなんて知りません．
サイト作成までの流れ
- 国土地理院から北海道の地形データを引っ張ってくる
- SVGに変換，IDなどの情報などをつけ足す
- Firebase Hostingのテンプレートを作成
- JSのコードを書く(定義含め300行くらい)
- デプロイ
簡単ですね．勉強含め4日くらいでできました．
地味にはまったところ
SVG中のstyle要素の名前空間
Vue.jsのコンテキストに含まれるSVGにそのまま<style>要素を置くとtemplate compile errorになるため，名前空間を宣言してあげましょう4．
コンパイルエラーになる例
<style>
path {
fill: #FFFFFF;
}
</style>
動作する例
<svg:style>
path {
fill: #FFFFFF;
}
</svg:style>
Win10 Mobile版Edgeでのv-on:inputイベント
Windows 10 Mobileの端末ではRadioボタンやSelect要素のinputイベントが発火しません．
他のブラウザやデスクトップ版Edge5では動作するため，見落としがちです．changeイベントを使いましょう．
イベントが発生しない例
<input type="radio" V-bind:id="'option'+index" v-bind:value="index"
v-model="value" v-on:input="$emit('input',{'index':index,$event})">
イベントが発生する例
<input type="radio" V-bind:id="'option'+index" v-bind:value="index"
v-model="value" v-on:change="$emit('change',{'index':index,$event})">
データ更新に合わせたURLの変更
vue-routerを併用する際に同時にURLも変更したい際の実装例のお決まりはあるのでしょうか？
今回は算出プロパティ内で変更しましたが，ほかのやり方があると思います．
var app = new Vue({
el: "#app",
router,
computed:{
newurl:function(){
return "abc"
},
rout:function(){
router.replace({path:`/app/${this.newurl}`})
return ""
},
}
}).$mount("#app")
所感
正直，普段作る業務アプリの範囲内だと，UIとViewModelを分けるうまあじがあまりありませんね．
開発してて思ったのは「よくわからないけど動いてる．すごい」でした，
今回のように，趣味で使う小さいアプリには簡単に適用できたので，慣れの問題でしょうかね．
最後に私の訪問マップにてお終いとさせていただきます6．
以上，ありがとうございました．
その他
北海道行きたいですね．