Adaloがアップデートされ、新たな機能としてGeolocaition機能が追加されました。
このGeolocaition機能によって、位置情報が取れるようになったので、かなり大きなアップデートかと思います。
なので、今回は、このGeolocaition機能を使用した簡単なアプリを作ってみようと思います！
※事前にGoogleマップのAPIキーが必要になります。取得方法に関しては、こちらをご覧ください。
https://help.adalo.com/component-basics/marketplace-components/maps
それでは早速、作っていきます！
▼Adaloアプリ作成、データベース構築
名前を決め、アプリを作成します。
場所のデータベースとして、「Trips」というデータベースを作っておきます。
プロパティーに「Location」を追加します。
ここで、事前に取得しているGoogleのAPIキーを入力する必要があります。
「Add」をクリックし、GoogleのAPIキーを入力します。
「現在地から〜km以内」みたいな感じで、表示変更をさせるために「Destination」というデータベースも作成します。
▼データベースの投入
３つほど、「Trips」のデータベースにRecordを追加しておきます。
「Destinations」のデータベースにもいくつかRecordsを追加しておきます。
▼Mapアプリの具体的な実装作成
Homeスクリーンに、カスタムリストを配置し、先ほど作成した「Trips」を表示させるようにします。
タイトルを「Trips name」に変更します。
サブタイトルを変更して、「Location」を表示させたいのですが、ここで、多くの選択肢が出てきましたね。
分かりにくそうな物を以下に挙げてみます。
Full Address：住所
Postal Code：郵便番号
Latitude：緯度
Longitude：経度
今回は、「Full Address」を表示させます。
カスタムリストのフィルター設定をしていきます。
このように、「is within」「is not within」で「〜以内」、「〜以外」でフィルターをかけることができたり、また、単位に関しても、マイルをキロメートルに変更することができたりします。
一番下の選択項目は、基準となる場所を表しています。
例えば、以下のようなフィルター設定にすると、「Current Device Location、つまり、スマホを持っているユーザーの現在地から５キロメートル以内のLocationのみを表示させる」というような仕組みを作ることができます。
「Sorting」に関しても、今までなかった「Closest to Farsest」「Farsest to Closest」という選択肢が増えており、これによって、いわゆる「近い順」「遠い順」に並べることができるようになっております。
ここでは、近い順にしておきます。
「Sort in relation to…」で選択する場所は、並び順に関しての基準値の役割を果たす場所になります。（今回は近い順に並べていますが、その基準の場所ということです。）
今回は、「Current Device Location」にしておきます。
その下の、「Fallback address」では、もし、「Sort in relation to…」で選択した場所（今回で言う、Current Device Location）を見つけることができなかった際に、基準となる場所のことを決めておくことができます。
〜km以内の場所だけ表示させるような実装をを構築するために、「Dropdown Menu」を配置し、「Destinations」を選択できるようにします。
カスタムリストのフィルター設定も、これに伴って変更しておきます。
わかりやすいように、Googleマップも表示させるようにしておきます。
同様に、APIキーをコピペし、フィルター設定等はこんな感じにしておきます。
▼Mapアプリの動作確認
100km以内には、全てあるので表示されていますね。
50km以内でもまだ表示されています。
30km以内になると、表示されなくなっているので、東京タワー、スカイツリー、東京駅は、現在自分のいる位置の30km以内にないということになります。
田舎にいるのがバレますね。笑
▼ノーコードAdaloで位置情報を使ったMapアプリ：まとめ
今回は、新機能として追加されたGeolocation機能を使用して、簡単なアプリをつくってみました。
今回のアップデートにより、Adaloでできることの幅が大きく広がりそうですね。
「UberEats」みたいな便利なデリバリーアプリも作れるようになったのではないかと思います。
これからもAdaloのアップデートには目が離せませんね！
YouTube動画でも解説してあるので、より詳しく学びたい方はこちらもみてみてください。
最後まで、ご覧いただきありがとうございました！