北海道の訪問記録を残すWebサイトを作った

全国の北海道ファンの皆さんこんにちは．
早速ですがこの地名を読めますか？
幌筵[^1]
[^1]: ほろむしろ，またはぱらむしる
当然読める日本人の方々は[ここ](https://hokkaido-22e17.firebaseapp.com/#/edit/jp/0/)から
漢字の読めない若い方々は[ここ](https://hokkaido-22e17.firebaseapp.com/#/edit/hira/0/)から
読めなかった非国民の方々は[ここ](https://hokkaido-22e17.firebaseapp.com/#/edit/en/0/)からアクセスできます．
私は北方領土をロシア領と呼ぶ売国奴[^2]なのでアクセスできませんでした．  
[^2]: 実の親からの呼称です
北海道は広いですよね．いろんなところに行きますよね． 

今回，北海道の自治体単位での訪問記録を付けられる[Webサイト](https://hokkaido-22e17.firebaseapp.com/)を作ったので紹介いたします．
要するに，[経県値](https://uub.jp/kkn/)の丸パクリですね．
皆と共有して~~思い出話に花を咲かせましょう~~マウント取り合いまくりましょう．
# Webサイト概要
![ページ概要](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630367/57f6e78e-f121-0cf2-1e70-29ec115f4ba4.png)
日本が主権を失った島々が堂々と居座っていますが，日本の自治体としては正しく存在するのでセーフです．

使い方

* 北海道が表示されるので自治体を直接ポチポチするか，下の振興局別
のリストからポチポチします．
* 右下のTwitterアイコンをクリックして共有します．

最大レベルは925です．真の道産子目指して頑張りましょう．
赤に染まった北海道を目指しましょう．

ホストサービスはFirebase Hostingを使っています．
使用したライブラリはVue.jsです．初めて触りました[^3]．
[^3]: 普段はWindows FormsアプリとAndroid 4.1対応のアプリを作っています．Windows 7はまだ買えます
JSは素のまま書いています．トランスパイルなんて知りません．
## サイト作成までの流れ
1. 国土地理院から北海道の地形データを引っ張ってくる
1. SVGに変換，IDなどの情報などをつけ足す
1. Firebase Hostingのテンプレートを作成
1. JSのコードを書く(定義含め300行くらい)
2. デプロイ

簡単ですね．勉強含め4日くらいでできました．

## 地味にはまったところ
### SVG中のstyle要素の名前空間
Vue.jsのコンテキストに含まれるSVGにそのまま\<style\>要素を置くとtemplate compile errorになるため，名前空間を宣言してあげましょう[^4]．  
[^4]: この記事の価値はここにしかないのでここ以外は読み飛ばしていただいて構いませんよ
コンパイルエラーになる例

```xml:NG
<style>
path {
    fill: #FFFFFF;
}
</style>
```
動作する例

```xml:OK
<svg:style>
path {
    fill: #FFFFFF;
}
</svg:style>
```

### Win10 Mobile版Edgeでのv-on:inputイベント
Windows 10 Mobileの端末ではRadioボタンやSelect要素のinputイベントが発火しません．
他のブラウザやデスクトップ版Edge[^5]では動作するため，見落としがちです．changeイベントを使いましょう．  
[^5]: Dev ToolsのEmulationでLumia 650にすると再現できます．
イベントが発生しない例

```html:NG
<input type="radio" V-bind:id="'option'+index" v-bind:value="index"
    v-model="value" v-on:input="$emit('input',{'index':index,$event})">
```
イベントが発生する例

```html:OK
<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も変更したい際の実装例のお決まりはあるのでしょうか？
今回は算出プロパティ内で変更しましたが，ほかのやり方があると思います．

```javascript:Gorilla
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を分けるうまあじがあまりありませんね．
開発してて思ったのは「よくわからないけど動いてる．すごい」でした，
今回のように，趣味で使う小さいアプリには簡単に適用できたので，慣れの問題でしょうかね．  
最後に私の[訪問マップ](https://hokkaido-22e17.firebaseapp.com/#/freeze/jp/ISAJAAgIAQAAAAwQEAkIAQgZCAgIAwkJCwsAAwgIAAgACAgEAAAAAyAAAAkAIwkBABAZCwAJCAwbCAkBCQAIGQkJCQEKBAkLDBkKARQRGQgZCQERGQMAAAAAAAAA)にてお終いとさせていただきます[^6]．
[^6]: アクセスできないといいつつアピールする屑
以上，ありがとうございました．  
<details><summary>その他</summary><div>

* 写真集
  * 斜里町
  ![知床1湖](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630367/2c052949-da47-7308-cc1b-b85764cfc0f3.jpeg)
  * 美瑛町
  ![色彩の丘](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630367/2b89263c-61d3-ceca-fd76-7cc8af8a77cf.jpeg)
  * 礼文町
  ![北のカナリアパーク](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630367/e475db62-3b64-b7ce-f136-68ce410e8979.jpeg)
  * 釧路市
  ![幣舞橋](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630367/da8be7f7-4b08-7838-7cf5-8ab8f1a0306a.jpeg)
北海道行きたいですね．
</div></details>