Reishi_Fields

アラフィフSEの日々の出来事

No-Codeをためしてみる(Glide編1)

 No-Code・・・従来、プログラミングしなければサイト制作できなかったことが、プログラミングせずにできるサービス(ずごくざっくり)。

 今回は、Gllide(グライドと読むのでしょうか?)を試してみます。

 

 

1.どういうものか?

 スマフォアプリのようなものらしい。
 しかもさくさくーっと簡単に作れるらしい。
 作ったアプリで稼ぐこともできるらしい(但し、有料プランらしい)。
 スプレッドシートをデータベースのようにして、データ管理物が作れるらしい。

 

2.作成

1)まずはアクセス

 Glidehttps://www.glideapps.com/)にアクセス

無題

 こんな画像のサイトらしいので、Get Startを選択。


 すると、↓こんな画面が出るので、「Sign up with Google」を押す。

※事前にこの手のサービス用にGoogleアカウントで捨てアドを作っておいた方がいいと私は思います。

無題

 

 Googleスプレッドシートと連携して作れるのが売り文句らしいので、Googleアカウントで登録すれば、自ずとGoogleドライブと連携する事を求められるのかと。
 よって、「許可」を押す。

 

無題

 私はこんな画面が出てきました↑。
 もう作成できそうです。

 

2)作成

 早速取り掛かります。
 今回は、データとなるネタを持ってないので、Browse templatesで。
 スプレッドシートにデータを作っていれば、左のアイコンから即とりかかれるようです。

 

無題

 たくさん用意されてます。
 私からすると、テンプレートというと、ホームページ作成サービスで用意されている下地の画像をイメージするのですが、ここでは「機能」に相当するようです。
 例えば、顧客管理用、インスタのような写真保存用、会員サイト用とか、そんな具合のようです。

 地図と連携したものを作ってみようと思いますので、City Guideを選択してみます。

 

無題

 

 一向に画面が切り替わりません。。。。。。
 3分経っても、アイコンが縦波ウニウニなので、思い切ってクリックしたら変わりました(まったく・・・)。

 

無題

 現在地の許可を求められましたが、常にその手の呼びかけには拒否です。 
 よって、作成者の方がいらっしゃるシスコが自動表示されるようです。


 というわけで、東京駅に移動してみましたが、ほぼ表示がない。。。

無題

 で、左側いじったら、地図の画面に戻れなくなってしまいました。。。。


 アプリの編集画面になるそうなのですが、そんな画面になってません。
 ブラウザの戻るボタンで再表示可能ですが、どうすれば編集できるかわからないので、元の画面に戻ることにしました。

無題

 画面背景は、白っぽいモードか黒っぽいモードかを選べるようです。

 

3)作成の続き(なぜか編集モードで開けた)

 再度、Create Appを選択し、City Guideを選択。
 ウニウニもうっとうしいので、エイっやでクリック。
 すると今回は編集モードで表示されました。

無題

 

 チュートリアルは消して、さっそく取り掛かります。

 さて、先ほど、東京駅に移動したら、シスコより表示が殺風景でした。
 これは、初期のデータにシスコのお店のデータが登録されているからです。

 左端の円盤が三つ重なったアイコンを選択してください。
 シスコのお店のデータが詰まってます。

無題

 

 これを東京駅周辺の情報としたいのであれば、東京駅近辺限定で、まずはデータ作成してみればいいのです。

 地図としての機能が既にできているので、元となるデータを編集することになります。

 

無題

 Edit sheetをクリックします。

 

無題

 当初いじくっていたら、一番左端のセルがきえてしまい、復活できなくなりました。スプレッドシートに触れるのは、実は初めてでもあります。
 ここで、下2行分のNameに「$$$$」と入力してみます。
 保存の仕方もわからないので、とりあえずブラウザを閉じます。
 画面に戻って、その店であろう箇所を選択すると、店名が変わっていることがお判りでしょうか?。

無題

 

 こんな塩梅で、東京駅周辺のデータを入力してみます。
 課題は、スプレッドシートの編集の仕方ですね。

 

4)Leanを編集

無題

 取り合えず目についた、Learnを編集します。
 今回は、東京駅周辺にします。
 よって、東京駅周辺の話を書いてみます。

 先ほどのEditボタンを押すと、スプレッドシートが立ち上がりますが、Learnというシートがあるのわかりますでしょうか?。
 恐らくここが該当するようです。

 

5)スプレッドシート

 そのスプレッドシートですが、私の場合は自動で保存されました。
 しかし、画面に反映されるまで、多少の時間があるようです。
 よって、スプレッドシートは、常に開いたままで、スマフォ編集画面に切り替えつつ、少し前のものが反映されているかを確認するような後追い作業となりました。

 

6)Tabs

 編集画面の下にある個所をタブと呼ぶそうです。

無題

 今回、私が作るのは、東京駅周辺情報です。

 スプレッドシートの名称やセルの名称は、下手に初心者は変更しない方がいいです。
 当初構想していた内容で、あれこれいじっていたら、リンクが取れず表示できない現象に陥りました。

 「Food & Drink」 とありますが、「soba or udon」に、「Attractions」を「View」にします。

 編集画面の左に「tabs」とありますので、それを選択します。

無題

 すると、右側にタブ一覧が表示され、その中の一部を選択すると下図のような編集画面が現れます。
 Label名を変えれば、タブの箇所の名称も変わり、Sorceがスプレッドシートの読み込むデータシートに相当するよう設定をします。

無題

 

7)データを編集

無題

無題

 とりあえず、3つの名所を入れました。
 Allナニガシを選択すると、八重洲詳しい方はお分かりかと思いますが、3点表示されました。

 しかし、問題は、Viewの箇所です。

無題

 先ほどまで、シスコの店が表示されてました。


 データだけ編集しなおしたのに、世界地図表示になってしまってますが、プロパティをいじくっていれば表示されるようです。

無題

 一応、それっぽくなりましたが、設定が今一つわかりません。
 まだ、消したはずのシスコの情報、特に地図が変な場所示して表示されたりします。

 

 次に、soba or udonの情報を載せる必要があります。
 スプレッドシートに、シートを追加します。

無題

 Attractionsシートをコピーして、そこにデータを入れていきます。
 あとはプロパティで調整してできあがり。

無題

 

3.最後に

 幾つか問題があります。

 

・地図の場合、GoogleMapの方位はあてにならない
 これは、このサービスが、GoogleMapを利用してないために、全く異なる(本当に異なりすぎる)地点を指してしまうためです。

 

・データのセル名称とのリンケージがよくわからない
 今回、データシートのカテゴリにて、Attractionsという名目でデータが入ってました。
 これを変えてしまうと、画面が全く表示されなくなります。
 どこかで、「Attractions」をいう文言を見ているはずなのですが、それがどこかが見つけることができませんでした。

 

・タブのアイコン一つで、シート一つを見る仕組み
 「All Place」では、Viewとsoba or udonの両方のデータを表示させたいのですが、先のカテゴリがよくわからないがために、AllPlace用に、二つのシートを合体させたデータシートを作る羽目となり、データの二重管理となってしまいました。
 本来の作り方であれば、1つのシートに全てのデータを登録し、Viewに表示させるものは、例えばカテゴリー列に「View」と入力したものがピックアップされて表示するように作るのが従来の作り方になります。

 これは、どうやら操作仕様のようです。
 スプレッドシートではなく、左側メニューのDataにて、データ構成が見れるわけですが、既に存在するセルのプロパティとでもいうのでしょうか、どういったデータ形式か?という設定があるはずなのですが、それが変更できない仕組みなようであり、どのような形式のセルにするかは、新規にAddする際に決めるようなのです。
 また、ここは、プログラミングの世界のデータベースの設計にも関係します。

 

 

 それと、、、、
  5分では決して作れません!!。

 操作知りえて、ネタが事前にあることが前提ですw。

 私は、2度データシートの改修をして失敗したこともありましたが、6時間はかかりました。徹夜です。

 あと、これ、どうやって配布するの?。。。。(続く)

 

<参考>

プログラミング未経験でも絶対にできる、アプリの作り方 - Glideの使い方 #1