(10連休5日目)令和最初だからと言って特にすることもないので個人開発続き

しまの時刻表 開発日誌

タイトル通り。

Twitter見てるとなんとなく今年2回目の正月感に溢れていた改元初日だったけど、近所を散歩してもしめ飾りがそこら中にあるわけでもなく、お店に入っても変な和風BGMが流れてるわけでもなく。

家の周りではお昼前に唐突に大音量で君が代が流れたくらいで、特に変わったことのない大型連休の中の1日って感じだった。

そんなわけで連休初日から続けている しまの時刻表(リンクは現行のやつ)のリニューアル作業の記録でも。

ElementUI→Vuetifyへの移行に戸惑う

新しいUIのイメージは前日までに出来ていたので、まずは現行サイトでもやっている船の運賃の計算部分から手を入れてみた。

既存のものからのコピペで済んだ部分も多かったけど、苦戦した部分を後で振り返ってみると、シンプルに見出し通り「ElementUIでは簡単にできていたことがVuetifyではできないorやり方が違う」ところだった。

VuetifyもElementUIもNuxtに標準で組み込まれてる(新規プロジェクト作成時にどれを使うか選択できて、モジュールも一緒にインストールしてくれる)UIフレームワークで、新サイトでは前者、現サイトでは後者を使ってるんだけど、まあモノが違えば当然細部も違ってくるもので。

たとえばElementUIのinput要素でnumberを使おうとすると、中の数値を1ずつ足したり引いたりできるボタンをオプションで付けられるんだけど、Vuetifyにはそれがなく。

キーボードで手入力させるのも非常にだるいので、結局似たような機能を自分で実装したんだけど、仕上がり的には若干微妙な気がしていて。

他にもselect要素へのデータの入れ方の違いでつまづいて、思い通りの挙動を実現するためにドキュメントを何度も読み返すことになったりで、想定外に時間がかかってしまった。

ちなみに両者比較してみたらこんな感じ(あくまで個人の感想)。

Vuetify ElementUI
概要 マテリアルデザイン、多機能で何でもできる やわらかめのデザイン、シンプルで使い勝手のいいパーツが多い
使いどころ CSS極力書かずにレイアウトから何から全部やりたい時、プロトタイプとかにもいけそう 部分的に動きのあるパーツ使いたい時(コーディングデータが既にある時とか？)
悪口 (良くも悪くも)Googleのサービスっぽい見た目になる、学習コストやや高め レスポンシブ対応苦手、ドキュメントが時々中国語

まあ最終的には好みで決めればいい。

Google Map上のマーカーで目的地等を指定できるように

リニューアルにあたって一番やりたかったことがとりあえずできるようになった。

現行サイトではセレクトボックスばっかりで、どの島がどのへんにあってってイメージは何かで別途調べてもらう必要があったんだけど、動画のようなUI採用したのでもう少し感覚的に使えるようになるかなと。

どういう実装してるかは 実際のコード を見てもらうとして、Google Map周りはあんま苦戦しなかった。

ツイートでも書いている通り、これでUI部分はほぼ完成、APIとの通信部分も現行サイトの使い回しでちゃんと動作確認が出来たのであとは各部分の微調整＆今回から新たに取り入れた位置情報のデータをDBにぶっこめばひとまずリリースにはこぎつけられるかなと思っている。

令和の幕開けと同時にってのを狙ってたけど、なかなか上手くいかないものですな。

明日はどうするか、しばらく雨続きだったのが一段落しそうなので遊びに出たい一方、引きこもり継続して一気に仕上げたい気もするし。

ノマドワーク(野外)の実験でもしてみようかな。