【注意】
Geolonia PWAマップで作成した地図アプリはインターネットに公開されます。個人情報やプライベートな情報などを登録しないようご注意ください。
このページでは、Geolonia PWAマップの更新方法を説明します。PWAマップの初期設定は以下のページをご覧ください。
Geolonia PWAマップ ユーザーマニュアル（初期設定編）
https://blog.geolonia.com/2022/05/17/pwamap-manual-setup.html
PWAマップの詳細は以下のページをご覧ください。
オリジナルの地図アプリを簡単に作成できる「Geolonia PWAマップ」ベータ版を公開（ニュースリリース）
https://geolonia.com/pressrelease/2022/05/17/pwamap.html
スポット情報の登録
Google スプレッドシートを開き、下記情報を入力します。
| 設定名 | 内容 |
|---|---|
| カテゴリ | カテゴリ名を入力します。同じ名前を入力すると同じカテゴリとして登録されます。 |
| 画像 | 画像のURLを入力します。GitHubに画像をアップロードする手順はこのページの「GitHubの画像アップロード」をご覧ください。※画像の推奨サイズは横幅350ピクセル以上です。 |
| 緯度 | スポットの緯度を入力します。Community Geocorderで緯度を取得する手順はこのページの「緯度・経度の取得方法」をご覧ください。 |
| 経度 | スポットの経度を入力します。Community Geocorderで経度を取得する手順はこのページの「緯度・経度の取得方法」のご覧ください。 |
| スポット名 | 好きなスポット名を登録します。 |
| 紹介文 | スポットの紹介文を入力します。 |
| Instagramのアカウント名を入力します。 | |
| Twitterののアカウント名を入力します。 | |
| 公式サイト | WebサイトのURLを入力します |
登録した情報は数十分から1時間の間隔で自動更新を行います。手動で更新したい時はGitHubにアクセスして以下の操作を行います。
スポット情報の手動更新
GitHubの自分のリポジトリにアクセスしてから画面上部の「Aciton」をクリック、左側の「build」を選択して画面が切り替わったら、右側の「Run workflow」をクリック、「Run workflow」を選択します。
「Actions」の「All workflows」をクリック、「build」が黄色いマークの時はしばらく待ちます。
「build」が緑色になったら地図の更新が完了です。
GitHubの画像アップロード
自分のGitHubページを表示し、「public」をクリックします。
アップロードしたいファイルをドラッグ＆ドロップします。
「master branch」にチェックが入っていることを確認して、「Commit changes」をクリックします。
アップロードした画像は、以下の形式で地図のURLの後に「/」をつけてファイル名を入力すると表示できます。
https://【ユーザーID】.github.io/【Repository name】/【ファイル名】
※アップロードしてから表示されるまでに時間がかかる場合があります。画像が正しく表示されない場合はしばらく間を開けてからアクセスしてください。
緯度・経度の取得方法
下記URLからCommunity Geocorderにアクセスします。
Community Geocorder
https://community-geocoder.geolonia.com/
画面左下に住所を入力して「検索」をクリックします。 ※住所は都道府県から始まる正確な住所を入力してください。
表示された緯度（経度）が目的の場所とずれている場合は、画面右上の拡大・縮小やドラッグ操作で地図を移動して、スポットのある場所を表示してください。登録したいスポットに画面中央の十字マークを合わせると緯度・経度が表示されます。
画面左下に表示された緯度（経度）の数字をコピーします。
スプレッドシートの「緯度」「経度」入力欄に該当の数字をペーストします。
この手順を繰り返して緯度と経度の両方をスプレッドシートに入力してください。
アプリのカスタマイズ
デザインのカスタマイズ
Google スプレッドシートの「基本データ」を選択、記入内容を変更することでアプリのデザインをカスタマイズできます。
カスタマイズできる内容は以下の通りです。
| 設定名 | 内容 |
|---|---|
| title | アプリの名前を入力します。 |
| description | アプリの説明文を入力します。 |
| form_url | Google フォームを使って投稿する場合にURLを入力します。フォームの設定方法はこのページの「Google フォームを使った更新」をご覧ください。 |
| logo_image_url | ロゴの画像を設定します。ロゴの画像サイズは95×95ピクセル、ファイル形式はSVGが推奨形式です。jpg/pngも設定できますが、この場合はfaviconやスマートフォンアプリの画像が表示されません。 |
| background_image_url | パソコンからアクセスした時に表示される背景の画像を設定します。画像サイズは1,920×1,080ピクセルが推奨です。 |
| primary_color | スポットやカテゴリ表示時のメニューバーの色をカラーコードで指定できます。 |
Google フォームを使った更新
Google フォームから情報を入力した情報を使ってPWAマップを更新することもできます。Google スプレッドシートを直接編集したくない時などにご利用ください。
Google フォームの設定方法
Google フォームにアクセス、以下の内容でフォームを作成してください。
| 設定名 | フォームの設定 |
|---|---|
| カテゴリ | プルダウン |
| 画像 | 記述式 |
| 緯度 | 記述式 |
| 経度 | 記述式 |
| スポット名 | 記述式 |
| 紹介文 | 段落 |
| 記述式 | |
| 記述式 | |
| 公式サイト | 記述式 |
画面上部の目のアイコンをクリックすると入力フォームを表示できます。
入力フォームのURLをメモに控えてから編集画面に戻ります。
「回答」をクリックします。
緑色のスプレッドシート アイコンをクリックします。
「新しいスプレッドシートを作成」を選択した状態で、「作成」をクリックします。
スプレッドシートのシート名を「スポットデータ」に変更します。
左下の十字マークをクリックしてシートを追加します。
Geoloniaで公開しているスプレッドシートの内容をコピーし、「form_url」に控えておいたフォームのURLを貼り付け、シート名を「基本データ」に変更します。
以上でGoogle フォームからGoogle スプレッドシートに情報を登録してPWAマップを更新できるようになります。