おすすめ記事

おすすめ記事一覧

Adalo Resource・地図と各種グラフ(スクリーンとコンポーネントセクション)について

最終更新日:2021.03.17

Adalo - Build Your Own No Code App

みなさんこんにちは。いかがお過ごしでしょうか。ノーコードツールAdaloにはもう慣れましたか?より複雑なアプリを作ろうとすると新たに学ばなければならないこともあるかと思いますが、たくさん操作して実体験として学習するのがオススメです。さてこの記事ではノーコードツールAdaloのAdalo Resourceよりスクリーンアンドコンポーネントセクション内の「地図と各種グラフ」について日本語で解説します。本来の英語版では地図とグラフは異なる2ページで紹介されていますので、ご注意ください。それではいってみましょう。

地図

1, Google APIキーを設定する

Google Maps API Keyを取得するには、Googleが説明している手順に従ってください。https://developers.google.com/maps/documentation/javascript/get-api-key

次に、Google API Keyをコピーして、AdaloのMap Componentの左パネルに貼り付けます。

2, Googleアカウントで、Google Geocoding API、Google Maps Javascript API、およびMaps SDK for iOSが有効になっていることを確認

1, https://console.cloud.google.com/apis/library/maps-backend.googleapis.com にアクセスし、「Enable」ボタンをクリックします。
2, https://console.cloud.google.com/apis/library/geocoding-backend.googleapis.com にアクセスして、[Enable]ボタンをクリックします。
3, https://console.cloud.google.com/apis/library/maps-ios-backend.googleapis.com にアクセスして、[Enable]ボタンをクリックします。
4, https://console.cloud.google.com/apis/library/maps-android-backend.googleapis.com にアクセスし、[Enable]ボタンをクリックします。
5, https://console.cloud.google.com/billing/linkedaccount にアクセスし、[Link Billing account] をクリックします。 お客様のGoogleアカウントには、APIの無料トライアル用に300ドルのクレジットが含まれており、お客様の同意なしにカードへの請求が開始されることはありませんが、Googleは APIの無料トライアルにアクセスするためにクレジットカードの登録を要求 しています。

3, マーカーの数を選択し、複数のマーカーがある場合は設定を行う

1, マップに1つのマーカーを表示するか、複数のマーカーを表示するかを選択します。これは「複数のマーカー…」を選択した場合です。
2, マーカーを表示するコレクションを選択します。
3, 必要に応じて、そのコレクション内のどのレコードにマーカーを表示するかをフィルタリングすることもできます。
4, また、アイテムの最大数やソートも設定できます。 例えば、A-Z順に並べられた上位10件のレコードのマーカーのみを表示するように選択できます。

4, マーカーのアドレスとアクションを設定する

1, 次に、左パネルの「マーカー」セクションを展開します。
2, マジックテキストを使って各マーカーのアドレスを設定します。 これは、1つまたは複数のマジックテキストプロパティで行うことができます。 ただし、正しいアドレスが設定された実際のマーカーは、エディタでは表示されませんが、アプリをプレビュー、共有、または公開したときに表示されます。
3, マーカーに任意のアクションを追加することもできます。 例えば、マーカーをクリックすると、そのレコードの詳細を表示する新しい画面にリンクしたり、詳細情報を表示するボトムシートを開くことができます。

5, マップスタイルをカスタマイズする

地図のスタイルをロードマップ、ハイブリッド、衛星、地形のいずれかから選択します。

下記はロードマップ

下記はハイブリット

下記は衛星

下記は地形

JSONを使った地図のカスタマイズ

地図のスタイルをさらにコントロールしたいと思いませんか? カスタム JSON を追加して、マップをさらにカスタマイズすることができます。 自分でJSONのコードを書くのは不安ですか? 心配はいりません。Google Maps Styling Wizard を使用して、独自のマップスタイルを作成できます。 ウィザードが自動的にJSONを生成してくれるので、コピーしてAdaloに貼り付けることができます。

1, https://mapstyle.withgoogle.com/ に移動します。

2, クリエイトスタイルをクリックします。

3, 自分のスタイルをカスタマイズします。

4, 終了をクリックします。

5, JSONをコピーをクリックします。

6, JSONをAdaloに貼り付けます。

7, アプリをプレビューすると、カスタムスタイルが表示されます。

注意:エディタではカスタムスタイルは表示されませんが、アプリのプレビュー、共有リンク、そしてもちろん公開されたアプリでは表示されます。

棒グラフと折れ線グラフ

1, コンポーネントを画面にドラッグ&ドロップします。
2, マジックテキストを使って、X軸とY軸をデータベースコレクションのプロパティにリンクさせます。
3, デザインパネルの「スタイル」タブを使って、折れ線グラフや棒グラフの色、軸ラベル、タイトルを編集することができます。

棒グラフや折れ線グラフのもう一つの特徴は、カスタムの数式を挿入できることです。例えば、各トリップの1日あたりのコストを棒グラフで表示したい場合(既存のデータ入力ではない)、「トリップコスト/トリップの日数」というダイナミックなテキストを割り振ることができます。

上記の写真は「デザインパネルの「スタイル」タブを使って、折れ線グラフや棒グラフの色、軸ラベル、タイトルを編集する」を示しています。

まとめ

いかがだったでしょうか。旅行系のアプリを作成する場合、地図やグラフはかなり重要なコンポーネントかと思います。操作方法をしっかりと理解して作業に取り組んでみてくださいね。それではまた別の記事でお会いしましょう。See You Soon!

 

 

 

 

 

Katsu

Katsu

高校まで日本で育ち、大学からアメリカ・ニューヨークへ。マスメディア、ジャーナリズム、インターネットメディア戦略を専門に修学。コロナ禍でオンライン主体になりつつある世の中で、記事が何かの手助けになれば幸いです。







関連記事

  1. SaaSロゴ

    Landbot

  2. 記事作成

    Bubble・データを表示する、ダイナミックな式を構築する

  3. 記事作成

    Bubbleのビジュアルエディタの一般原則について解説!!

  4. 記事作成

    Bubbleのアーキテクチャ最適化とエンジンの限界について解説!!

  5. Adalo Resource・カラーとフォント(ブランディングセクション)について

  6. tribe

    Tribe

  7. 特集記事

    ノーコードで爆速モバイルアプリ作成!オススメツールを紹介

  8. 記事画像

    発注者も必見!ノーコードツールで開発を行うメリット13個

  9. 記事作成

    Bubble・プラグインエディタ&プラグインの一般的な設定について

人気記事

  1. topimage
  2. 記事画像
  3. 特集記事
  4. top_image

おすすめ記事一覧

  1. 記事画像
  2. 記事画像
  3. top_image
  4. 飲食店 会計
  5. Productivity
PAGE TOP