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」というデータベースも作成します。▼データベースの投入3つほど、「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、つまり、スマホを持っているユーザーの現在地から5キロメートル以内の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動画でも解説してあるので、より詳しく学びたい方はこちらもみてみてください。https://youtu.be/zUoNSZjAAbQ%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FzUoNSZjAAbQ%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%22%20allowfullscreen%3E%3C%2Fiframe%3E最後まで、ご覧いただきありがとうございました!