Geolonia PWAマップユーザーマニュアル（初期設定編）

【注意】

Geolonia PWAマップで作成した地図アプリはインターネットに公開されます。個人情報やプライベートな情報などを登録しないようご注意ください。

このページでは、Geolonia PWAマップの初期設定を説明します。PWAマップの更新方法は以下のページをご覧ください。

Geolonia PWAマップユーザーマニュアル（マップ更新編）
https://blog.geolonia.com/2022/05/17/pwamap-manual-map.html

PWAマップの詳細は以下のページをご覧ください。

オリジナルの地図アプリを簡単に作成できる「Geolonia PWAマップ」ベータ版を公開（ニュースリリース）
https://geolonia.com/pressrelease/2022/05/17/pwamap.html

初期設定

PWAマップの初期設定には以下が必要です。

Googleアカウント
GitHubアカウント
Google Cloud Platformの設定

※Google Cloud Platformの登録にはクレジットカードが必要ですが、課金の必要はなく無料で利用できます

1から3まですでに設定済みの方は、このページを先に進み、「PWAマップのセットアップ」から設定を進めてください。

GitHubアカウントをお持ちでない方、Google Cloud Platformを設定がお済みでない方は、このページを読み進めていただき、設定を行ってください。

※Googleアカウントの取得はここでは省略します。お持ちでない方はGoogleのWebサイトから各自取得してください。

GitHubアカウントのセットアップ

GitHubのWebサイトにアクセス、画面右上の「サインアップ」を選択します。

好きなID（Username）、メールアドレス（Email address）、パスワード（Password）を設定、「Email preferences」にチェックを入れてから「検証する」をクリック、表示される質問に答えてから「Create account」を選択します。

注: GitHubで地図アプリを公開する場合、ここで設定したユーザーIDは、地図アプリのURLに使われます（例：https://【ユーザーID】.github.io/xxxxx）。

画面が切り替わり、８桁の数字を入力する画面が表示されます。

登録したメールアドレスに記載された数字を入力します。

個人または会社の規模、学生、先生かどうかを回答します。答えたくない場合は画面下部の「Skip personalization」でスキップできます。

以下の画面が表示されたら、GitHubのアカウント作成は終了です。

Google Cloud Platformのセットアップ

Google Cloud Platformをクリックします。まだGoogle アカウントにログインしていない場合は画面上部の「ログイン」を選択して、お持ちのGoogleアカウントでログインしてください。

ログイン済みの場合は、画面上部に表示される「無料で開始」を選択します。

国や組織情報を選択、利用規約にチェックを入れて「続行」を選択します。

電話番号が登録されていない場合は登録、されている場合は番号を確認して先に進みます。

支払情報の確認が表示された場合は、支払情報を選択して「無料トライアル」をクリックします。
※有料アカウントにアップグレードしない限り、課金が発生することはありません。

画面に表示される質問に回答して「完了」をクリックします。 ※この画面が表示されない場合もあります。

PWAマップのセットアップ

GitHubアカウントとGoogle Cloud Platformの準備が終わったら、以下の設定を行います。

Google Sheets APIのセットアップ
Google スプレッドシートのセットアップ
GitHubのセットアップ

以下の説明に従って設定を進めてください。

Google Sheet APIのセットアップ

Google Cloud Platformにアクセス、「プロジェクトの選択」をクリックして「新しいプロジェクト」を選択します。 ※「プロジェクトの選択」が「My First Project」と英語表記される場合もあります

プロジェクトに好きな名前をつけて「作成」をクリックします。

画面上部に先ほど作成したプロジェクト名が表示されているのを確認した上で、画面左上のメニューから「APIとサービス」「ライブラリ」を選択します。

検索ウィンドウに「sheets api」と入力して検索、表示される「Google Sheets API」を選択します。

「有効にする」をクリックします。

画面左の「認証情報」をクリックし、続いて画面上部の「認証情報を作成」から「APIキー」を選択します。

作成したら「閉じる」をクリックし、続けてAPI キーの設定を行います。

「API キー」をクリックします。

「API の制限」の「キーを制限」をクリック、その下のプルダウンを選択します。

プルダウンから「Google Sheets API」を選択、「OK」をクリックして「保存」を選択します。

保存したAPI キーをクリックします。

「API Key」をコピーして、テキストエディタなどにメモします。

Google スプレッドシートのセットアップ

Geoloniaが公開しているGoogle スプレッドシートのサンプルにアクセスします。

画面左上の「ファイル」から「コピーを作成」を選択します。

好きな名前をつけて「コピーを作成」をクリックします。

画面右上の「共有」をクリック、共有範囲を「リンクを知っている全員」にして「完了」を選択します。

権限が「閲覧者」になっているのを確認したら、「リンクをコピー」で共有URLをコピーし、テキストエディタなどにメモします。

GitHubのセットアップ

GeoloniaのGitHubにアクセス、「Use this template」を選択します。

以下の表に従って設定を行います。

設定名	内容
Repository name	名前を英数文字で設定します。ここで設定した名前は、地図アプリのURLに使われます（例：https://【ユーザーID】.github.io/【Repository name】）
Description	説明文を入力します。空欄でも問題ありません
Public/Private	初期設定の「Public」のままにしてください。「Private」に変更すると正常に動作しなくなります
Include all branches	クリックしてチェックを入れます。チェックを入れないと正常に動作しなくなります

設定が終わったら「Create repository from template」を選択します。

以下の画面が表示されたら、「Setting」を選択します。

画面左側の「Secrets」「Actions」をクリックします。

「New repository secret」をクリックします。

以下の情報を入力して「Add secret」をクリックします。

設定名	入力内容
Name	GOOGLE_SHEET_API_KEY
Value	【保存しておいたGoogle SheetsのAPIキー】

再度「New repository secret」をクリックします。

以下の情報を入力して「Add secret」をクリックします。

設定名	入力内容
Name	GOOGLE_SHEET_URL
Value	【保存しておいたGoogle スプレッドシートの共有URL】

「Setting」をクリック、「Actrions」「General」を選択します。

画面下部にある「Workflow permissions」の「Read and write permissions」を選択して「Save」をクリックして保存します。

画面上部の「Aciton」をクリック、左側の「build」を選択して画面が切り替わったら、右側の「Run workflow」をクリック、「Run workflow」を選択します。

「Actions」の「All workflows」をクリック、「build」が黄色いマークの時はしばらく待ちます。

「build」が緑色になったら初期設定完了です。

画面上部の「Settings」をクリック、「Pages」を選択すると緑色のエリアに地図のURLが表示されます。
※「Source」が空欄の場合はクリックして「gh-pages」を選択してください。

URLをクリックすると地図が表示されます。

PWAマップの更新方法は以下のページをご覧ください。

Geolonia PWAマップユーザーマニュアル（マップ更新編）
https://blog.geolonia.com/2022/05/17/pwamap-manual-map.html

← Previous Post Next Post →