クソWebアプリ制作日記　その８

これまで

ExpressでAPIサーバを立てて、Heroku上でJsonを返すAPIを使うことはできた。 (DBと連携しないとこの構成にした意味は無いが。)
Webアプリをギリギリ人に見せられるレベルの完成度にするまで、残り数日。
今日も気絶するまで酒を飲む予定のため、あまり時間はない(現在21時。ダラダラしすぎた・・・)。
八方塞がりのDB接続は置いておいて、Web画面の作り込みを行うことにする。

他に書く事は特にない。昼過ぎまで寝てて、起きたらアニメ観てただけだから。
しいて上げると、Amazon見てたら「DXランペイジガトリングプログライズキー」が定価以下で売っていたので注文したくらい。配達員の方には申し訳ないが、また転売価格になったら死ぬほど腹立つので、注文させてもらいました。
この素晴らしく優しい世界の中で、唯一といってもよい悪の存在。それが転売屋。デスノート持ってたら、真っ先にこいつら全員駆逐する。
最近は、予約解禁時刻の16:00に張り付いていたのに「真骨彫電王」も「真骨彫タジャドル」も「METAL BUILD フリーダムガンダム CONSECP 2」も予約できなかった。あいつらスクリプトでも組んでるの？
今までの傾向から、真骨彫は発売日以降に定価で買えるようになると思うけど、「METAL BUILD フリーダムガンダム CONSECP 2」は値段下がらなさそう。
「METAL BUILD ストライクフリーダムガンダム」は発売後も全然値段下がらなかった記憶があるし、しかもコロナ影響で生産数が少なくなっていそうで心配。そんな心配事の原因を作る転売屋が心底憎い。

どんなWebアプリにするか？

転売屋憎さは置いておいて、早速アプリの概要を考えよう。
元々ぼんやり考えていたのは、ぱっと見の見栄えがよく、仕事で使っているため「Leaflet」を使った地図メインのアプリにしようということ。
地図を使って何をするか。アイデアは色々あるが、短期間で作り込める機能に限定すると、中々悩ましい。
加えてDB連携できない可能性も視野に入れなけれならない。うーん。

f:id:majigomi:20200418212700p:plain
とりあえず、こういう画面を作ってみる。

ピンを配置を変更
情報の登録・参照

次に、これらの機能も追加したいが、まずは地図を表示して地図上にダイアログを出すことができなきゃ話にならないので、まずは作ってみるとする。

vue2-leaflet

Leafletは、vueで使用できるようにラップされた「vue2-leaflet」を使用する。何故なら仕事で使っているから。
まずはインストール。

C:\work\sampleProject\sample-pj>npm install leaflet vue2-leaflet
npm WARN vue-cli-plugin-express@1.0.2 requires a peer of @vue/cli-service@^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN vue-cli-plugin-express@1.0.2 requires a peer of @vue/cli-shared-utils@^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN vue2-leaflet@2.5.2 requires a peer of @types/leaflet@^1.5.7 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ vue2-leaflet@2.5.2
+ leaflet@1.6.0
added 2 packages from 1 contributor and audited 27946 packages in 53.887s

42 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

ワーニングは後でうまく動かなかったときのためにここに貼っておくとして、今は無視。
とりあえず、レイアウト等は無視して地図を表示してみる。

Leafletの使い方は、やはり公式リファレンスを参照する。(vue2-leafletのリファレンスには詳しいことが書いてないので、大元のLeafletのリファレンスから読み替える)
Documentation - Leaflet - a JavaScript library for interactive maps

f:id:majigomi:20200418223442p:plain
・・・おかしい。地図を出すには出せたけど、2,30年前に流行ったタイルをシャカシャカ移動して絵を完成させるパズルみたいになっている。
仕事で使ってるやつ余裕で使いこなせる説、早くも崩れる。

・・・結局、leaflet.cssを読み込んでいないことが原因だった。普段意識してないから全然分からなかった。。

<div id="map">
・・・
</div>
・・・
import "leaflet/dist/leaflet.css";
・・・
<style>
#map {
  width: 100%;
  height: 500px;
}
</style>

f:id:majigomi:20200418225244p:plain できた！

ついでにピンを立てて、これをビルドしてHerokuにアップしてみる。 f:id:majigomi:20200418232709p:plain
問題なく表示できた！
明日は8:30に起きてプリキュア見なきゃいけないので、今日はここで終了。
風呂入って酒飲んで寝よ。