脱!教養ゼロママ

もう恥ずかしくない!教養のあるママを目指してます!

MENU

google スプレッドシートのグラフをAdaloに表示|初心者のアプリ開発|Adalo

f:id:yuka-edu:20220123171711p:plain

こんにちは!ゆかゆかです。

 

以前、Nocodeツール「Adalo」を使ってグラフ表示をしましたが、

あまり自由でないとコメントさせて頂いたところ、Adalo仲間様から

googleスプレッドシートのグラフをAdaloに表示したら?」

と素敵な方法をご紹介していただきました!

(リンク:グラフ表示を設定してみた|初心者のアプリ開発|Adalo

 

そんな方法があったのか〜 お仲間様、本当に尊敬です!

 

ということで、私も真似をしてgoogleスプレッドシートのグラフを

Adaloに表示させてみることにいたします〜。

 

Googleスプレッドシートの設定

実は私・・・Googleスプレッドシートをほとんど使ったことがございません。

なので、なんとなく、グラフを用意してみました。

 

f:id:yuka-edu:20220122201315p:plain

 

こちらの表の元データは、娘の保育園での卒対の役割決めアンケート結果です。

先日、Googleフォームを使用してアンケートを実施いたしておりました。

 

グラフの追加方法

挿入 > グラフ の順に選択

f:id:yuka-edu:20220122204708p:plain

 

グラフが挿入されました。

画面右側の「グラフエディタ」で

グラフの種類や使用するデータを選択できるようです。

f:id:yuka-edu:20220122204739p:plain

 

使い方は、もっと勉強しないといけません・・・。

こちらのグラフをAdaloの画面に表示させます。

 

グラフの公開設定

グラフ右上の: > グラフを公開 を選択

f:id:yuka-edu:20220123170837p:plain

 

「ウェブに公開」が表示されルので、「公開」ボタンを選択

f:id:yuka-edu:20220123150938p:plain

 

作成されたリンクをコピーします。

f:id:yuka-edu:20220123150945p:plain

 

AdaloでのGoogleスプレッドシートのグラフ表示設定

続いて、Adalo側の設定を行なっていきます。

 

グラフ表示用コンポーネントの配置

コンポーネント配置します。

 

「+」 >  ADD COMPONENT > Simple > Web View

f:id:yuka-edu:20220123150952p:plain

 

続いて、グラフのURLを編集します。

f:id:yuka-edu:20220123150958p:plain



このような感じでコピーしたURL貼り付け。

f:id:yuka-edu:20220123151006p:plain


設定はこれでおしまいです。

それでは、プレビューしてみます〜。

 

プレビュー

無事にGoogleスプレッドシートのグラフが表示されました〜!

f:id:yuka-edu:20220123151014p:plain

 

まとめ

googleスプレッドシートのグラフをAdaloに表示させる方法をご紹介しました。

いつも良い方法を教えていただき、ありがとうございます!!

みなさまの参考にもなれば嬉しいです。

 

あと、googleとAdaloでデータを連携させるなら、zapierが使いやすいです。

yuka-edu.hatenablog.com

 

最後までお読みいただき、ありがとうございました。

 

▼無料でも意外と使える Nocode開発ツール Adalo

www.adalo.com