Glide使ってNoCodeでアプリを作ってみる
2020/08/17
巷で話題のNoCodeでアプリ作成をやってみたかったので、Glideを少し触ってみた
Glideとは
簡単に言うと、GoogleスプレッドシートをデータベースとしてノーコードでPWAサイトを作れるサービス
https://www.glideapps.com/
作成するアプリ
YouTubeに公開されている「香水 歌ってみた」シリーズを一覧で見れるアプリ
アプリURL
動画
アプリの作成手順
スプレッドシートでデータを作る
項目
- 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/"®EXEXTRACT(A2, "\?v=([^&]+)")&"/maxresdefault.jpg"// REGEXEXTRACTで動画のURLからVideo IDを抽出
// REGEXEXTRACT(文字列, 正規表現)
REGEXEXTRACT("https://www.youtube.com/watch?v=9MjAJSoaoSo", "\?v=([^&]+)")
// => "9MjAJSoaoSo"完成したデータベース
一旦データ量はこのくらい
Glideでアプリを作る
新規アプリ作成
「Create app…」→「From Google Sheet…」→「香水データベース」（作成したスプレッドシート）を選択
これだけで既にアプリっぽいものができてる
レイアウト調整
STYLE
「Cards」を選択
DATA
「Image」に「Thumbnail URL」、「Title」に「Video Tilte」を選択
「Header」と「Details」は何も指定しない（投稿日だったり、再生数にしたかった）
DESIGN
基本デフォルトのままで「Image shape」を「3:2」に変更
トップページはこんな感じで完成
詳細ページのレイアウト調整
クリックすると詳細ページに飛ぶ
ここで動画を再生できるようにする
Videoコンポーネント追加
MEDIAの「Video」を追加し、「Video」に「Video URL」を選択
動画が再生できるようになったので詳細ページはこれで完成とする
アプリを公開する
「SHARE」→「Publish app」で公開できる
アプリURLは空いている文字列であれば自由に選べる
完成
感想
- この程度のアプリがサクッと作れてしまうのは驚いた（特に使い方を調べずにアプリ公開までいけた）
- アプリ側からデータの追加もできるっぽいので使いみち広そう
- 流石にデータ作りをノーコードだけでやるには限界があるので、データ作成はコーディングありで、フロントだけノーコードでいくのはありかなと思う
- Glideを使っているのがわかってしまうのが難点（有料プランだと起動時のロゴ消せるかも？）
