全体像
記事を投稿するにあたって、それなりに意味のあるシステムを目指した方がモチベーションが維持できそうだと思い、上記図のような構成でIoTデバイスの情報をブラウザ上でリアルタイムに参照可能なシステムを作ってみようと思います。
ひとまずの目標は位置情報を取得してGoogleMapに表示するようにしてみます。
今回のテーマ
今回はブラウザで地図(GoogleMap)を表示する部分を実装します。
今のところはローカル環境での開発です。
なお、GoogleMapAPIキーの取得方法や基本的な開発環境の構築(WSL導入やVSCodeインストールなど)はここでは取り扱いません。
環境
Windows(WSL2)上のUbuntuを使っています。
| OS | バージョン | |
|---|---|---|
| ホスト | Microsoft Windows 11 Pro | 10.0.23403 ビルド 23403 |
| ゲスト | Ubuntu | 22.04.2 LTS |
手順
Nuxt3インストール
公式ドキュメントに則ってNuxt3環境を用意します。
$ npx nuxi init nuxt3-google-map
Need to install the following packages:
nuxi@3.5.0
Ok to proceed? (y)
Nuxi 3.5.0 0:21:16
✨ Nuxt project is created with v3 template. Next steps: 0:21:17
› cd nuxt3-google-map 0:21:17
› Install dependencies with npm install or yarn install or pnpm install 0:21:17
› Start development server with npm run dev or yarn dev or pnpm run dev
プロジェクト名として指定した名前のフォルダができているので、そちらに移動して依存関係のインストールを行います。
$ cd nuxt3-google-map/
$ yarn install
yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
warning vscode-languageclient@7.0.0: The engine "vscode" appears to be invalid.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
$ nuxt prepare
Nuxi 3.5.0 0:23:50
✔ Types generated in .nuxt 0:24:42
Done in 160.46s.
まずは素の環境のまま立ち上げてみます。
$ yarn dev -o
yarn run v1.22.19
$ nuxt dev -o
0:25:48
Nuxi 3.5.0 0:25:48
Nuxt 3.5.0 with Nitro 2.4.1 0:25:48
0:26:21
> Local: http://localhost:3000/
> Network: http://172.25.186.171:3000/
ℹ Vite client warmed up in 4553ms 0:27:07
✔ Nitro built in 4262 ms
yarn dev -o 実行後しばらくはこの画面で待たされます。
立ち上げが完了するとこの画面になります。
これでNuxt3でのWeb画面表示には成功しました。
vue3-google-map 導入
ここからvue3-google-mapを導入します。
基本的にはこちらの記載通り進めます。
https://vue3-google-map.netlify.app/getting-started/
まずyarn add vue3-google-mapでライブラリを追加します。
まあまあ時間がかかります。（私の環境では2～3分かかりました)
$ yarn add vue3-google-map
yarn add v1.22.19
warning ../package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
warning vscode-languageclient@7.0.0: The engine "vscode" appears to be invalid.
[3/4] Linking dependencies...
warning " > vue3-google-map@0.15.0" has unmet peer dependency "vue@3".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 5 new dependencies.
info Direct dependencies
└─ vue3-google-map@0.15.0
info All dependencies
├─ @googlemaps/js-api-loader@1.15.1
├─ @googlemaps/markerclusterer@2.1.0
├─ kdbush@4.0.2
├─ supercluster@8.0.1
└─ vue3-google-map@0.15.0
$ nuxt prepare
Nuxi 3.5.0 19:01:22
✔ Types generated in .nuxt 19:02:14
Done in 207.79s.
keroway@DESKTOP-6JD9LQK:/mnt/c/dev/wakuto/vue3-google-map/nuxt3-google-map$
HTMLのヘッダ部分でスクリプトを読み込むため、初期状態で以下のようになっているnuxt.config.tsに設定を追加します。
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
})
app - head - script - src に参照先をセットしています。
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
app: {
head: {
title: "nuxt3-google-map",
script: [
{
src: 'https://unpkg.com/vue3-google-map',
}
]
}
}
})
app.vue の編集
app.vue は以下の内容で上書きしてしまいます。
vue3-google-mapのサンプルに対して、座標やzoomを変えるなどいくつか手を入れています。
とりあえずマップを表示するだけなら元のサンプルのままで問題ありません。
YOUR_GOOGLE_MAPS_API_KEY のところにご自身のAPIキーの値を入れます
<template>
<GoogleMap api-key="YOUR_GOOGLE_MAPS_API_KEY" class="map" :center="center" :zoom="zoom">
<Marker :options="{ position: center }" />
</GoogleMap>
</template>
<script>
import { defineComponent } from 'vue'
import { GoogleMap, Marker } from 'vue3-google-map'
export default defineComponent({
components: { GoogleMap, Marker },
setup() {
const center = ref({ lat: 35.676764621841286, lng: 139.7336903131048 });
const zoom = ref(18);
return { center, zoom };
},
})
</script>
<style scoped>
.map {
position: relative;
width: 100%;
height: 950px;
}
</style>
表示確認
指定座標にピンを立てた地図が表示されます。
おわり
今回はここまでです。
次回、Amazon Iot Coreを使用して座標情報を受け取り、表示をリアルタイム更新する仕組みを入れる予定です。