volpe’s diary

フリーランスじゃなくなったプログラマ volpe が日々便利だなぁと感じたことを中心に綴るブログです

Glide を試してみた

Twitter を眺めていたら 簡単過ぎる!GoogleスプレッドシートからPWAアプリを開発できる「Glide」を使ってみた! という面白そうな記事を見つけたので早速試してみた。

Google Spreadsheet をデータとしてスマホ用のアプリを簡単に作れるという。

とりあえずやってみた

確かに簡単にできた。 Oshio Tunings

f:id:volpe0104:20190412092740p:plain

題材はこれまで何回か作ってきた、大好きな押尾コータローさんの楽曲の曲ごとのチューニングがすぐにわかるアプリ。 曲を練習する際にチューニングがパッとわかると便利。おまけに検索機能もデフォルトで付いている。

基本的な作り方は前述で紹介した記事そのもので、スプレッドシートに曲情報をせっせと入力して、Glide 上でどのデータをどこに表示するかを調整するだけ。

こんな感じのスプレッドシートを書いた。 f:id:volpe0104:20190412092735p:plain

UIはいくつかのテンプレートから選択する感じでカッコいいのが簡単にできちゃう。 アルバム画像は自身で運用しているサービス「コタれん」に上がってるデータをへの直リンクを使ったけど、GooglePhotos からでも直リンクがいけたので応用が効きそう。(永続的にいけるかは試していない)

あとちょっと工夫(?)したのは、曲を練習中はどうしても上手い人の演奏動画が見たくなるから Youtube へのリンクボタンを追加した。 f:id:volpe0104:20190412092728p:plain

リンクURLはスプレッドシート上で単純に Youtube への検索クエリを生成しておいたものをボタンに割り当てた。

= "https://www.youtube.com/results?search_query=押尾コータロー " & B2

B2 には曲名が入っている。 PCのブラウザだと Youtube のサイトが開いちゃうけど、スマホだったら Youtube アプリがさっと起動して動画を再生できるからいい感じ。

あと、コメント機能も超簡単に実現できる。このアプリでコメントは使わなそうだけど、曲の感想とか共有するのはアリかも。

他にも地図とかビデオとか部品がいくつかあるので発想次第では簡単に面白いものが作れそう。

テンプレートで発見

ひと通り試したところで、他にもどんなものが作れるのかなとテンプレートを見たら結構複雑な画面遷移でも実現できてる。。。 f:id:volpe0104:20190412092716p:plain

詳細画面からさらにリストを表示するのに 「Inline list」 という Component を使っているけど、自分が作ったアプリには表示されていない。プラグイン的に追加する方法があるのかな? これが使えればかなり凝った画面遷移も出来そう。 スプレッドシートを覗くと隠し列に他のシートとのデータリンクの行が。。。

f:id:volpe0104:20190412092654p:plain

右下にこっそり表示されているヘルプで「Inline list」を調べると以下の動画が見つかった。 https://youtu.be/TH5jk855JrM

これは凄い、、単純にシートにあるデータを表示するだけではなくて、他シートとの関連を書いてあげることでRDB的な使い方も出来そう。

ヘッダー行に 「ヘッダ名=シート名:ヘッダ名」 という感じで書くと別シートのデータを参照してくれて、詳細画面をさらに階層化できそう。 さらに複数要素がある場合は 「ヘッダ名=シート名:ヘッダ名:Multiple」 と書くとリスト表示されるとのこと。これが「Inline list」の正体か! 他にも隠れ機能ありそう。

夢が広がるなぁ。徐々に試してみよう。