Glideでユーザー投稿型のQ&A掲示板アプリを作ってみました
ノーコードでPWAアプリが作れてしまう「Glide」。いろんなアプリを作って、いつか訪れるかもしれない仕事に備えています。
さて、今回作ったのが「掲示板アプリ」です。
イメージとしては「ヤフー知恵袋」や「2ちゃんねる」のようなもので、ユーザーがスレッドを立てて、他のユーザーがそのスレッドに対してコメント（レス）を追加していく形式のアプリとなっています。
ユーザー登録も可能で、ユーザー毎に立てたスレッドや残したコメントの管理も可能です。
また、ユーザーごとに役割の付与もできるようにしており、「管理者のみがスレッドをクローズにできる」といった工夫もいれています。
無料アカウントの範囲内で実装可能ですので、よければ参考にしてみてください。
■ 掲示板アプリ「TAM掲示板」のご紹介
今回作成したアプリ「TAM掲示板」は、以下のリンクからアクセスできます。サンプルアプリですので、スレッド作成・コメントなどは自由に操作していただいて結構です。
Glide : TAM掲示板
「TAM掲示板」は、スレッド型のコミュニケーションアプリ。質問したい人がスレッドを立てて、そのスレッドに対してユーザーが自由にリプライを残していけます。
ユーザーはスレッドを自由に立てることが可能。コメントを入力するだけでなく、画像を複数登録することも可能。また、「カテゴリの設定」など、スレッドに情報を追加することも可能です。
立てられたスレッドに対しては、ユーザーがリプライを残せます。今の設定では、「スレッドを立てた人」と「管理者」のみがリプライを入力できるようにしていますが、すべてのユーザーにリプライの権限を付与することもできます。
当アプリはユーザーの登録が必須となっており、「スレッドのオーナー」や「リプライしたユーザー」が判別できるようになっています。未登録の匿名ユーザーが投稿を乱立し、アプリが荒れてしまう心配がありません。
コミュニケーションを重ねた結果、スレッドで問い合わせた課題が解決した場合は、「解決」フラグを立てることが可能。
「未解決のスレッド」と「解決済のスレッド」はタブで切り替えができるようになっています。
できあがったアプリは比較的シンプルにまとまっていますが、ここに至るまでには色々と紆余曲折がありました。
特に苦労・工夫したポイントをまとめましたので、同じようにGlideでのアプリ制作に励んでいる方の参考になれば幸いです。
■ ポイント①：スレッドとコメントの「Relation」
Glideのお作法の基本は「1つのシートに対して、Glideの1コンテンツ」という関係性です。
たとえば、Glideで「学校紹介アプリ」を作りたいとします。コンテンツには「学生一覧」と「部活紹介」があります。
「学生一覧」というコンテンツを作りたかったら、スプレッドシートに「学生一覧」というシートを作ります。そして、そのシートの中に「各学生の情報」をまとめる必要があります。
"まとめる" ということは、そのコンテンツに表示させたい情報をすべて入力しなければなりません。「氏名」「生年月日」「メールアドレス」「所属部」など、その人に関する情報のすべてです。
「部活紹介」も同様です。その部活の「活動内容」「顧問の先生」「大会記録」など、部活に関する情報をすべて入力します。
さて、ここで問題になるのが「部活ページに所属している学生の情報を載せたい場合」です。
「部活紹介」のシートに、所属している学生のデータを入力すると、その内容が「学生一覧」と重複してしまいますよね。可能なら「学生一覧」の中から「バスケ部に所属している学生のみを抽出」という処理ができればベストです。
これを可能にするのが「Relation」。
「1シート＝1コンテンツ」という垣根を飛び越えて、他のシートの情報を引っ張ってくることができる機能です。
今回作った「TAM知恵袋」も、この機能を活用しています。
通常「スレッド」と「リプライ」は別々のコンテンツとして、違うシートで管理されています。
しかし「各スレッド」に特定のIDを埋め込み、そのIDと関連のあるリプライだけを抽出する処理をいれることで、「スレッドに関連のあるリプライのみを表示させる」ことに成功しました。
この「Relation」という機能は、Glideの根幹を支えるほど便利な機能。これを使いこなせるかどうかで、Glideで作れるアプリの幅が大きく変わります。
言葉だけだとわかりにくいかもしれません。もし詳しく知りたい方は、ぜひお問い合わせください。
■ ポイント②：無料プランでできる「Role」の設計
「スレッドが荒れる恐れがあるので、リプライできるのは "管理者" と "スレッドを立てた人" に限定したい」といったニーズがあるかもしれません。
Glideには「Role」という機能がありますが、これを使うには「Private App」プラン以上の契約が基本的には必要です。
しかし、ちょっとした工夫をすれば、ユーザー毎に「Role（役割）」を割り当てて、「Role」毎に使える機能を限定することができます。
Glideでは、ログインしたユーザーの情報が「Users」というシートに入力されます。
そこで、「User」シートのユーザー情報に「Role（役割）」という列を追加。各ユーザーの役割を明示します。
そしてGlideのコンテンツ設定でフィルター機能を使用。「ユーザー情報の中に "管理者" がある人のみ、ボタンを表示する」といった出し分けをすれば、使える機能を限定することができます。
■ ポイント③：ユーザー登録の有無によって使える機能の出し分け
この掲示板アプリを使用するためには、ユーザー情報の登録が必要です。今回は簡単な「氏名」と「写真」のみとしましたが、もっと詳細な情報の入力を要求することもできます。
実際にビジネスで活用するとなった場合、匿名のユーザーがスレッドやリプライを乱立させてしまったら、運用と管理が難しくなってしまいますからね。
ちなみにこれも、Glideが用意している機能ではありません。ちょっとした工夫が必要です。
明かしてしまえばシンプルな種。
「スレッド」や「リプライ」を入力するためのボタンがあるのですが、「必要情報がすべて記入されたユーザーにのみ、ボタンを表示させる」というフィルターを掛けているのです。
■ Glideは知恵と工夫の積み重ね
Glideでできる一つひとつの機能はシンプルで、一見すると大したアプリは作れなさそうな印象を受けます。私もGlideを触り始めた当初は、そう思っていました。
しかし、すでに作られているテンプレートを解体したり、他のユーザーが作ったアプリの中身を覗いたりしているうちに、いろいろなテクニックが見えてきました。
そして、そのテクニックを一つひとつ習得し、組み合わせることで、作れるアプリのバリエーションはアイデアの数だけ無限に広がるんだと気がついたのです。
Glideを触りはじめて、まだ活用方法が見いだせないとお困りの方は、まず既存のテンプレートをコピーして、その中身を分析してみると良いですよ！