Posted at

Glideで1項目を「画面展開→画面展開」する方法(別シート・別項目を参照する)


はじめに

【2019年4月版】Google SpreadSheetから音速でPWAが吐きだせるってホントに?!

を拝見して面白そうだったので、自分が欲しいと思っていたアプリ(というよりデータ集)を作ってみました。

本当にあっという間に作れてしまって最高ですね!!!

作成時に疑問に思った点は 公式サンプルアプリ を眺めて解決したのですが、それについて書いてみます。


作成アプリとソーススプレッドシート

まずは参考用に以下リンクです。以降の文章で言葉不足で不明点がありましたら参考にしてください。


【疑問】メニューで項目をタップした後、更に別項目へ展開する機能の実装方法は?

image.png

単純にスプレッドシート作っただけだと、この「画面展開→画面展開……」と続ける方法がわからなかったんですよね。

別メニューの画面へリンクが飛ぶわけでもないし……。


【解】List Referenceコンポーネントを使用する

image.png

List Referenceコンポーネント、もしくはInline listコンポーネント(後述します)を使用することで、画面展開機能が使えました。

一定の条件を満たさないとコンポーネントの候補にも挙がってこないようなので、以下に手順を記載します。


Step1:展開したい先のデータを用意する

image.png

この例では所属組織の説明を表示したかったので、そんなシートを作りました。


Step2:項目名を「項目名=参照先シート名:参照先項目名:Multiple」にする

image.png

サンプルアプリのスプレッドシートを見ると 項目名=参照先シート名:参照先項目名:Multipleとしているようなので、それを真似しました。

(……仕様ドキュメントを見ましたという解決方法でなくて申し訳ない。。。

 これが何仕様に基づいての記法なのか、ご存知の方いらっしゃったらコメントください)


Step3:参照元項目内容を、参照先項目内容と同一にする

image.png


Step4:List Referenceコンポーネントが表示されるようになるので、それを使う

List Referenceコンポーネントを追加してからは、他の項目と同様に編集します。

疑問だった機能を実装することができました!

screen.gif


(余談)Inline listコンポーネントというのもある

「単行本」メニューには、次の動画のように「登場キャラクター」という項目があります。

screen2.gif

この項目はInline listコンポーネントを使っています。

これも別シート・別項目を参照して拾ってきてくれる機能です。

項目名に項目名=参照先シート名:参照先項目名:Multipleを指定するのは同じです。

image.png

「『出番』シートにあるn巻のキャラクターを拾ってきてね~」で勝手に参照してくれるの最高ですね……。

現時点のサンプルがキャラクター偏りすぎでその効果が全然現れていませんが!!


おわりに

プログラミングよりデータ準備するほうが時間かかるぅ~~!!(アプリいじる時間が30分ならデータ作成で2時間かかってる)

こういう作品のファンアプリなら、Allow Editingをtrueにしたりスプレッドシート公開して、色んな人で協力してデータ入力するのが良いのでしょうね……。