高木のブログ

Glide使ってNoCodeでアプリを作ってみる

2020/08/17

巷で話題のNoCodeでアプリ作成をやってみたかったので、Glideを少し触ってみた

Glideとは

簡単に言うと、GoogleスプレッドシートをデータベースとしてノーコードでPWAサイトを作れるサービス
https://www.glideapps.com/

作成するアプリ

YouTubeに公開されている「香水 歌ってみた」シリーズを一覧で見れるアプリ

アプリURL

https://perfume.glideapp.io/

動画

アプリの作成手順

スプレッドシートでデータを作る

項目

  • Video URL
  • Video Title
  • Thumbnail URL

投稿日、再生数の項目も欲しかったがノーコードでは厳しいと思ったので省略

Video URL

動画のURLをコピペで貼り付け

Video Title

関数で取得する

=SUBSTITUTE(IMPORTXML(A2,"/html/head/title")," - YouTube", "")
// IMPORTXMLで動画タイトルを取得
// IMPORTXML(サイトURL, XPathクエリ)
IMPORTXML("https://www.youtube.com/watch?v=9MjAJSoaoSo", "/html/head/title")
// => "香水 / 瑛人 (Official Music Video) - YouTube"

// SUBSTITUTEで「 - YouTube」を取り除く
// SUBSTITUTE(対象文字列, 検索文字列, 置換文字列)
SUBSTITUTE("香水 / 瑛人 (Official Music Video) - YouTube", " - YouTube", "")
// => "香水 / 瑛人 (Official Music Video)"

Thumbnail URL

関数で取得する

="https://i.ytimg.com/vi/"&REGEXEXTRACT(A2, "\?v=([^&]+)")&"/maxresdefault.jpg"
// REGEXEXTRACTで動画のURLからVideo IDを抽出
// REGEXEXTRACT(文字列, 正規表現)
REGEXEXTRACT("https://www.youtube.com/watch?v=9MjAJSoaoSo", "\?v=([^&]+)")
// => "9MjAJSoaoSo"

完成したデータベース

一旦データ量はこのくらい perfume database created from a spreadsheet

Glideでアプリを作る

新規アプリ作成

「Create app…」→「From Google Sheet…」→「香水データベース」(作成したスプレッドシート)を選択 Glideでアプリを作る 1

これだけで既にアプリっぽいものができてる Glideでアプリを作る 2

レイアウト調整

STYLE

「Cards」を選択 Glideでアプリを作る 3

DATA

「Image」に「Thumbnail URL」、「Title」に「Video Tilte」を選択
「Header」と「Details」は何も指定しない(投稿日だったり、再生数にしたかった) Glideでアプリを作る 4

DESIGN

基本デフォルトのままで「Image shape」を「3:2」に変更 Glideでアプリを作る 5

トップページはこんな感じで完成 Glideでアプリを作る 6

詳細ページのレイアウト調整

クリックすると詳細ページに飛ぶ
ここで動画を再生できるようにする Glideでアプリを作る 7

Videoコンポーネント追加

MEDIAの「Video」を追加し、「Video」に「Video URL」を選択 Glideでアプリを作る 8

動画が再生できるようになったので詳細ページはこれで完成とする Glideでアプリを作る 9

アプリを公開する

「SHARE」→「Publish app」で公開できる
アプリURLは空いている文字列であれば自由に選べる Glideでアプリを作る 10

完成

感想

  • この程度のアプリがサクッと作れてしまうのは驚いた(特に使い方を調べずにアプリ公開までいけた)
  • アプリ側からデータの追加もできるっぽいので使いみち広そう
  • 流石にデータ作りをノーコードだけでやるには限界があるので、データ作成はコーディングありで、フロントだけノーコードでいくのはありかなと思う
  • Glideを使っているのがわかってしまうのが難点(有料プランだと起動時のロゴ消せるかも?)

参考


SNS でシェアする


ytkg

Written by ytkg, Twitter, GitHub