見出し画像

[無料]ドコデスとココダオの使い方

こんにちは松本です。ジオグラフィカの開発者です。

2024年6月にいくつかWebアプリを作ったんですが、そのうちのドコデスとココダオの2つは解説が必要かなと思ったので、ここで概要と使い方を説明します。

新しいWebアプリを作り始めたら公開するのが面倒くさくなって放置していました。(この解説も99%書いたあと1ヶ月くらい放置してました…)

それぞれの特徴

それぞれは位置送信と簡単な情報共有に特化しており、複雑な機能はありません。極めてシンプルなWebサービスです。

ドコデス

  • スマホに不慣れな人に現在地座標を送ってもらうためのWebアプリです

  • 位置を送る人(送信者)はボタンを押すだけで送信できます

  • 送った位置情報を見られるのは送信を依頼した人(依頼者)だけです

  • 複数の送信者がいた場合でも、それぞれの位置を知れるのは依頼者だけ

依頼者の画面。送信者が位置を送れば地図上に表示される。

ココダオ

  • 「イベント」という単位で共有グループを作ります

  • イベントは開始日時と終了日時を設定できます。無期限でもOK

  • イベントのページにアクセスすれば位置を送ることができます

  • 送った位置は参加者全員が見られます

  • 位置、地点(マーカー)、メッセージを共有できます

丸いアイコンが各ユーザーの位置

ドコデスの使い方

  1. 依頼者が送信者に位置送信を依頼する

  2. 送信者が送信画面で位置送信ボタンを押す

  3. 送信者の受信画面に位置が表示される

というWebアプリです。

「依頼者」の操作 ログイン

まずは依頼者がログインと「ドコの作成」をします。

ドコデスのページにアクセスすると下の様な画面が表示されます。とりあえず始める場合は仮登録で大丈夫です。Googleアカウントでログインすると複数のスマホやPC、タブレットで同じ画面を見られます。

「仮登録ではじめる」でも「Googleアカウントでログイン」でも、初回は名前の入力を求められます。適当な名前を設定してください(後で変更できます)。

仮登録でログインした状態。

仮登録でログインすると上の様な画面になります。黄色の「ドコ?を開始」ボタンを押すと名前の入力を求められます。適当に入力してください。

OKを押すと新しいドコが作られます。

上の画像の「テストドコ」をクリック(タップ)すると、ドコの詳細画面に入れます。

水色のボタンを押して、送信者に位置送信を依頼するための文章を共有します。メールやLINEに直接送ったり、クリップボードにコピーできたりします。下記の文面を送信者に送ってください。

現在地の座標を送っていただきます。
1.開いてください→ https://kokodesuyo-475c3.firebaseapp.com/okuru.html?uid=xxxxxxxxxxxxxxxj2&uuid=xxxxxxxxxxxxxx
2.位置情報の取得を『許可』してください(確認が出ない場合もあります)。エラーになったら画面の指示に従って設定し、再読み込みしてください。
3.画面を開いたまま待って、緯度や経度などの数字が表示されたら成功です。
4.『座標を送る』を押してください。エラーになったら画面の指示に従ってください。5.「座標を送信しました」と表示されたら成功です。

「送信者」の操作

上の文面を受信した送信者がURLを開くと、依頼者のときと同様に名前の入力を求められます。入力すると下のような画面が表示されます。

送信画面

ここで黄色い「テスト太郎へ座標を送る」をクリックすると、位置が送られて、下の画像の様に依頼者の地図上に表示されます。

受信画面。ドコの名前や依頼者の名前が違ってますが気にしないてください

受信した位置は、地図の下にある青い文字をクリックすることで、拙作のジオグラフィカに送ることができます。Googleマップにも送れます。

注意事項

  • 送信者が開いたブラウザによっては位置の測位ができないことがあります。位置送信の権限を確認してください。

  • メッセンジャーなどで送ると、送信画面がそのアプリ内のブラウザで開かれることがあり、ログインや測位、送信が上手くできないことがあります。可能ならChromeやSafariなど標準のブラウザで開いてください

  • 送信画面をスマホのホーム画面に登録しておくと便利です

  • 送信画面を開いたり、ログインや測位の許可をするのはスマホに不慣れな方には難しいかも知れませんので、使用前に対面で動作確認と説明をするとよいでしょう。練習しておいてください。

ココダオの使い方

  1. まず誰か(リーダー的な人)がログインしてイベントを作る

  2. イベントのページにアクセスした人がそれぞれ位置やマーカーを送る

  3. 位置やマーカーはページの参加者に共有されて、アクセスした人は全員見ることができる

というものです

ログイン

ココダオにアクセスすると、ドコデスと同様にログインを求められます。

認証基盤はドコデスと同じなので、ドコデスにログインしていれば下の画面は表示されず、下のような画面が表示されます。

イベントの作成

「イベントを作成」ボタンを押すと下記のような画面が表示されます。イベント名と開始日時、終了日時を設定します。

日時は設定しなくても使えますが、設定しておくと指定日時以外でイベントページにアクセスした時に位置を送信しません。

例えば、お互いの家の場所までは共有したくない場合は、共有したい期間を短めに設定しておけばいいということです(まだ家にいる時間や帰ったあとの時間と被らないように設定するとか)。

名前を入力して作成ボタンを押すと、「参加中のイベント」に追加されます。イベント名をクリックするとイベントの画面が表示されます。

イベント詳細画面

下の画面がイベント詳細画面です。ここで位置の送信や共有ができます。共有できる情報はお互いの位置、メッセージ(チャット)、マーカー(地点情報)の3つです。

地名検索

地名で検索できます。現在地から遠い場所の地図を見たい時に使います。例えばイベントの開始日時前に遠い場所にマーカーを追加したいときなどを想定しています。

現在地表示

クリックすると現在地が画面中央に表示されます。

位置送信と、このページを共有

位置は送信権限(初回ページ表示の際に確認が入ります)があれば自動的に送信します。この画面の「座標を送る」を押すことでも送れます。

このイベントに誰かを誘う際は、「URLをコピーする」でURLをクリップボードに入れてLINEやメールなどで送るか、眼の前にいるならこのQRコードを読んでもらうことで参加してもらえます。

マーカー追加

マーカーとは地点に立てたピンやアイコンのことです。画面中央の+マークをマーカーを追加したい地点に合わせてマーカー追加ボタンを押すと地図上にマーカーのアイコンが表示されます。

マーカーをクリックすると下のようなポップアップが表示されます。自分が追加したマーカーのみ、内容の編集や移動、削除を行えます。

メンバー一覧、チャット、マーカー一覧

各種受信したデータの一覧を見られます。

設定

アカウント設定
ログインした時に設定した名前や、ランダムで勝手に決まった個人テーマカラーの変更ができます。

イベント設定、イベントを削除
このイベントを作った人だけが使えるメニューです。イベントの名前、開始日時、終了日時を変更できます。

イベントを削除
このイベントを削除して、イベントに送られた位置やチャット、マーカーなどをすべて削除します。復元は出来ないので注意して削除してください。

イベントから退出
イベントの参加者に表示されるメニューです。イベントを作った人には表示されません。イベントが終わったときや、間違って送ってしまった位置を削除したいときなどに使ってください。自分が送ったデータのみ削除されます。

まとめ

中央集権的に位置情報を集めるドコデスと、みんなでお互いの位置やマーカーを共有するココダオの2つを紹介しました。便利かも?と思ったら試してみてください。

なお、これらは習作として作った試作品なので今後機能追加の予定はありません。今はもう別のものを作ってますので…。ってことで、改良したいと思ったら自分で開発してください。プログラミングは楽しいよ。

余談:新作アプリ

最近作ってるのは、こんな感じで地図上に図形を書き込んで、それを簡単に共有できたりする地図アプリです。ジオグラフィカとは別物で、名前は「コラボマップ」と言います。

マーカーを追加したり書き込みを入れたりした地図を3Dで表示することもできます。複数人による同時編集や地図の共有が簡単にできまるものです。

下記リンクからデモ用の地図を見られます。

閲覧専用なので見るだけですが、こういう地図を簡単に作って共有するの、楽しそうじゃないですか?完成したらまた解説記事を書きます。お楽しみに。

わぁい、サポート、あかりサポートだい好きー。