glideというアプリ作成ツールを知って面白そうなので触ってみました。こういう試作時に自分が使わないものを作るとテンションが劇下がるのは分かる（あと知る人も試作に引っ張られて微妙感になる）ので、そこは自分が使いたくなるものにしようと。
そこで今回は、アイデア投稿アプリ（管理側アプリもあり）を作ってみました。
詳しい人は分かりますが、ネイティブアプリではなくPWAというアプリっぽい感じです。とくに違和感としては、PCブラウザでアクセスすると「スマホ画面」があって動くかどうか分かりづらい点でしょうね。その点や細かい点を除けば、十分検証としても耐えうると思いますし、これで手応えがあれば本ネイティブアプリを作るもありだし、使いようだなというところです。
glideというアプリ作成ツールを知って面白そうなので触ってみました。こういう試作時に自分が使わないものを作るとテンションが劇下がるのは分かる（あと知る人も試作に引っ張られて微妙感になる）ので、そこは自分が使いたくなるものにしようと。
そこで今回は、アイデア投稿アプリ（管理側アプリもあり）を作ってみました。
詳しい人は分かりますが、ネイティブアプリではなくPWAというアプリっぽい感じです。とくに違和感としては、PCブラウザでアクセスすると「スマホ画面」があって動くかどうか分かりづらい点でしょうね。その点や細かい点を除けば、十分検証としても耐えうると思いますし、これで手応えがあれば本ネイティブアプリを作るもありだし、使いようだなというところです。
アイデア投稿アプリの仕様メモ
ざっくりですが、仕様というかメモです。概ねのイメージは頭でありつつ、最終的に起こしたものです。なんでこの通りに作ろうというよりも、作りながらやっているので時間はそこそこかかってます。
企画意図
glideの試作や慣れのため。ただその場合に、自分が使わないような謎アプリでは「テンションが下がる」のに加えて、仮に制作メモを公開すると、それを見た人もテンションが下がる（笑）ので、せっかくなら自分が使いたいものに寄せてみようとした。
その結果、アイデア投稿アプリという今最も自分が作ったらいいかなというものにした。
アプリ概要
アプリタイトルは直観的に「アイデアカフェ」とした。アイデアを投稿することをアイデアを「淹れる」とややこじらせたか分からない名前になっている（笑）
ユーザーはアイデアをアプリから投稿できる。投稿出来る項目は、タイトル、内容、タグ、名前の４つ。タイトルと内容は必須項目。匿名投稿可能。
アイデア投稿後、管理側で承認をした場合のみ公開される。承認されない場合は公開されない。
ユーザーは投稿されたアイデアを閲覧できる。
他にも、アイデアに対するいいね等はあるほうが面白いのですが、そもそもアプリ自体がそこまで使われないのでそれは意味がないということで省いていますし、あと仮にやると多分登録概念がいるのでメールアドレス登録が必須になるので面倒なのでスルーしています。
留意点
glideのフリー版という意味で、500行の登録が限界となっている。500アイデアもそもそも集まらないと思うので杞憂。一方で500になったら、おそらく追加できないのではないかと想定。挙動は未検証。
悪意があるユーザーが投稿しまくることは可能。とはいえそれらが公開されることはないものの、500行制限はかかるのでここは微妙感あり。とはいえ、サンプルとして割り切っておく。
参考にしているもの
ひらめきカフェというサービスが昔あってそれはすでになくなってしまったので、懐かしいなあと思いつつ。ひらめきカフェはTwitterログインでコメントとかもできたのでそっちのほうが高機能かもしれません。あと、Webサービスでした。アプリではないです。一方で、ひらめきカフェ自体はマネタイズとかそういうことではないはずで、習作っぽいものの位置づけから、そういう「ビジネスではない」が「一定のニーズ」がありそうなものかなという認識はあります。
完成したアプリ
都合により非公開やクローズドのこともありますが、基本公開しておきます。
使い方としては、スマホアプリであればアクセスするとホーム画面に追加（iOSであればSafariで開く必要ありです。Chromeとかだとホーム追加ができないので）すると、アプリアイコンからそのまま「アプリ」っぽく使えます。よければ「アイデアを淹れて」みてください。ひどいものでないなら公開しますので（笑）
細かい使い方は仕様通りです。アイデア投稿、閲覧の2機能です。
管理アプリは管理用なので後述するイメージをご参考にどうぞ。
glideでアイデア投稿アプリを作る流れ
ここからは作り方などです。自分メモとして省略するところもありつつ、自分がハマったところを中心にメモしていきます。
１．glideの登録＝Googleアカウント必須
Googleスプレッドシートを使うのでGoogleアカウントが必要です。これらはさくっとやってしまうと。
２．Googleスプレッドシートから作る
アプリの作り方はテンプレートから選ぶか、Googleスプレッドシートからかどちらかです。テンプレートは英語で色々あるのですが、基本これらの動きは理解してないとそのまま使いづらいので、おすすめしません。よって、Googleスプレッドシートからちまちま項目を入れて作ることを最初はおすすめします。僕もそうしました。
これに関しては最もこのglideのポイントで、Googleスプレッドシートにデータがあればそれっぽく勝手に作成ツールで判断してくれて作ってくれるということです。ここが強みといっていいでしょう。楽できるわけでここで時間を生み出してあとは時間をより実現したいものに近づけるというところです。
３．公開する
アプリが出来たら公開します。PCブラウザでは上のように見えます。これ僕もそうだったので何もいえないのですが、動くとは思わなくて、クリックやスクロールをスマホUI上でやるかってことなんですよね（笑）これ気づかずに動かし方が分からない人が多いのではないかなと。
まだこのアイデアカフェなら、アイデアを淹れるボタンが目立つので「そこをクリック」する人がいるので、「あ、動くんだ！」で気づくかもしれないです。
公開設定はこれはpublicで誰もが見える形になっています。管理側アプリはパスワードをつけています。
以上がざっとした流れです。
あとは細かいところは先達記事から学べばいける人はそこそこやっている人でしょうが、今回初心者向けにこうすれば出来るという狙いではないので、以下は技術メモっぽいところになります。
はまったかもなポイント
色々とはまるポイントがありました。僕だけかもしれませんが。
フリー版においてGoogleスプレッドシートとglideの同期はやや時差がある
これはもうサーバというかビジネス的な意味もあるのでしょう。リアルタイムで更新されるとかではないです。最低２，３秒はもたつきがあります。これをリアルタイムでやるっていう発想が「おかしい」かもしれませんが、すぐ更新されると思いこんでいると時差に悩みます。
習作として試しに「カウント」アプリとしてチェックボックスを押すたびにスプレッドシートのセルの数字が増えるみたいなことをやったのですがこれももっさりしています。テンプレートに計算機アプリがありますが、これもリアルタイム感はあれど、もっさりするのかなという感じです。
ただglideをフォローすると、上のカウント処理自体は、Googleスプレッドシートのトリガーで変更時処理を入れているみたいなことでそっちもあるのでもっさりする。つまり、glideの同期処理とGoogleスプレッドシート側のスクリプト処理でもっさりすると。別のアプリでは、Googleスプレッドシートでのスクリプト処理→Googleスプレッドシートでは反映済→glideでは未反映ということがよくありました。この解決方法はなくて、PRO版などでより更新同期を保証する？などですがこれもリアルタイム性はそこまでないので、そこは留意したほうがいいはずです。
レスポンスを求めるのは酷ですという理解でいいかと。
レイアウト画面で、ADDやEDITや書き込みEntryがごっちゃになる
レイアウト画面は最も使う画面だと思いますが、ここにあるSTYLEでList形式から、detailsまであります。ここで理解が浅いと、ADDタブを押して追加しないと「追加」でいないと思いがちです。
アイデアカフェアプリは、ADDの「Allow usert to add items」はFalseです。「アイデアを淹れる」ボタンの挙動は、FeaturesのActionとしてShow formを指定しています。これはform画面を出すということで、同時に書き込み先シートを指定できます。さらに項目も追加指定できます。
formをshowするので、Form画面が勝手に生まれるのでそこでADDできるってことです。このあたりはglideの癖なのか、特徴なのか、正直分かりませんが、見方によっては、「何か追加する処理」として理解する時に、たくさんの入り口があるので混乱します。というか、めちゃくちゃ混乱しました。
入力項目はComponentsの最下部にある
同様なもので、DetailsでないとComponentsは追加できないです（＋マークが出てこない）。それはいいのですが、ここでComponentsとして、ENTRY FIELDSでText Entryとあるのですがこれがいわゆるテキスト入力項目です。一番上のTEXTはただの静的ラベルの意味のテキストなので入力出来ません。
ちゃんと下まで見てなかったので「入力項目」がないと結構慌ててましたのでこのあたりもご注意を。
入力シートと表示シートは分けたほうがいい
これはどこかでも見かけたのですがそのとおりです。一方で、アイデアカフェは一つのシートです。Formで入力をするのでシート自体を作る必要がないからです。入力自体を自分でカスタムしたい（Formのようでないレイアウト？）なら、それがおすすめです。
一方で、少し試して混乱したのは、入力と表示の共存です。検索画面みたいなのはあり（そのままSearchboxはデフォルトであり）でしょうけど、入力した項目があって、すぐ同じ画面で表示って多分できないのではないかと思ったりします。
仮にやれてもある程度間接的にやるのかなあと。まあそもそもそんな複雑なことをやるなって感じですが、これは諦めましたね。
一気に作るのでなく、入力はこの画面、表示はこの画面、ということで、シートもinputとoutputとか、で分けたほうが分かりやすいですね。このレベルまで来ると、HTMLとCSSではないですが、データとデザインを分けるみたいな話にもなるし、結局Googleスプレッドシートというデータをデザイン勝手にしているというところで、限界は出てきます。
しかしこれは限界があるから使えないということではなさそうです。使い方次第ですね。
buttonのACTIONとしてShow shareing opotionsはネイティブスマホのみ
いわゆる実機のみです。そうでないとPCブラウザでボタンを押すと何も起きないので「未実装」と思うのですがそうではないです。
スマホでやると、いわゆる共有っぽい画面が出てきました。まあマニアックなところですが（笑）
DataタブでのAdd ColumnとGoogleスプレッドシート直接編集で見た目はずれるが挙動は問題なし
項目がそのままの順番でなかったりします。多分ですが、Googleスプレッドシートの追加順で、glideData画面では右に追加されていくわけです。つまり、Googleスプレッドシートに後から左側に挿入列追加とかすると、確実に見た目はずれますので、このあたりきっちり揃えたいのであれば、挿入ルールを決めたほうがいいのかもしれないですね。僕はまあスルーしました（笑）
なるほどと思ったglideっぽいテク
公式のDocumentaionは動画付きなので、英語でなくて、映像で理解可能です。そこにも色々あるのですが、やれることは限られる、つまりコアであるGoogleスプレッドシートから作るというのは変わらないです。だからこそ後は工夫とアイデアって感じを受けました。そこが僕は好きですが。
管理アプリとユーザアプリを分ける
これはアイデアカフェでもやっています。投稿と閲覧だけできるアプリをpublicアプリとしています。管理者アプリをadminアプリとしてやっています。
管理アプリのイメージをアップしておきます。
ポイントはタブです。下にタブがあって、公開済みと承認待ちで分けています。解説動画の通りですが、実現のポイントは、Filterをかけてフラグ（TRUE/FALSE）でTRUEのものを公開済みに、そうでないものは承認待ちとしているということです。
Filter自体はレイアウト画面のFEATURESのFILTERにあります。正確には、参考までにアイデアカフェアプリでは、
新規投稿時は承認フラグ自体はFALSEでなく、emptyなので、またFALSEはTRUEにしたものだけどFALSEにするもあり得るのでそうしています。
また承認済み画面の詳細画面もあって、そこで以下のように承認フラグがいじれます。これも解説動画通りですね。
これは結構テクいなあと思ったので、いきなりはおすすめしません。ある程度アイデアカフェアプリが出来てから、後で作りました。複製も出来るので閲覧アプリを作ってから管理アプリがいいかもしれないですね。
GASの計算を反映させるテク
これはテクいのですが、一方で動作が早いわけでもない（同期処理から）のでおすすめするというよりも、できるという参考程度です。実際に処理が遅いとGoogleスプレッドシート側のGASで処理すればなんでもglideに載せられるわけですけど、まあ動作に耐えられるかどうかですかね。
具体的には、GoogleスプレッドシートでGASを作る時に、トリガーを設定します。スプレッドシートの変更時でトリガー発動をさせれば、Googleスプレッドシートが変わったタイミングでGASの処理ができますから、例えば何かユーザーが入れたらAPIの結果を返すとかもできるわけです。天気予報APIがあったとして、地域名を入れたら天気を返すとか。でも思想というか設計としては無駄なアクセスになるので、そもそも天気予報状態を1時間毎にシートにためておいてそれを閲覧するだけ、のほうが健全というか正しい気がします。
そういう意味では書籍名を検索して入力していく蔵書登録なんかは、openBDなんかを使うと書影も使えるので面白いかもしれないですね。そうすると、「本のタイトル」を入れて登録していくとか、ある程度アプリっぽいものができそうです。
触ってみた感想など
このアプリに作成にかかった時間
ちゃんと計算してないので申し訳ないですが、読み込んで表示だけなら、1時間もあればいけるでしょう。ただこっから色々調べて、管理アプリも作るとか、色々なことをしていたら、数時間はかかってます。3時間くらいはかかってる気がしますね。
試作版としてなら十分過ぎる
思った以上に使えるというところです。この手のツールは期待値が高くなりすぎて（すぐできる、誰でも出来るなど）正直どうかなと思ったのですが、想定以上にイケてました。
もちろん、何でも出来るわけではないですし、期待値レベルでいえばかWebサイト作成ソフトなどでWixやstudioやJimdo等があると思いますけど、それでどこまでやれるかってことと同様かなと。
つまり、アプリを試しに作るでは十分ではないかと。逆にこれで十分ではない何かは他で作ったらという感じですね。例えばWixで不十分だなと思う人はWordpressなり別で勉強していくはずですから、そこですよね。
あと当然ながらある程度のことをやると、設計なり全体を把握したり、そもそもなんでアプリ作るのかなど色々と考える量が増えてきます。そこらへんをうまくバランス取ることが大事かもしれないですね。
他のAdaloなども触ってみたのですが、直観性はglideかなあとかです。これはもう好みとやりたいこととスキルとかもありそうですので、なんともいえないですね。
料金的にはPRO版でマネタイズされる
まあSaasモデルというものになります。公式の料金表をチェックしてみると、FREE版は、500行まで、ファイル容量は100MBまでです。In-app purchase feeはアプリ内決済購入手数料ってことになりそうです。これは何かというと、Buy buttonという購入ボタンでは決済がstipeというサービスを使うのですが、その手数料がPROなら2％で、FREEなら10％ってことです。stripeを使えばECアプリも作れるってことですね。
逆にアイデアカフェアプリでアイデアを買うボタンを付けたらstripe的にオッケーかはおいておいて、論理的には可能ということになります。楽しそうですね。
PRO版は月19ドル（年払い時）です。Eメールのホワイトリスト機能が付くのでセキュリティとしては高くなるということですね。他にはブランドロゴを自社のものに変えたり、独自ドメインを使えたりできそうです。FREE版はサブドメインですので。Googleアナリティクスで分析したいとかもFREEでは無理ですね。
どのレベルでPRO版を使えばいいかは状況次第ですが、FREEを使って満足して継続して使うならありかもしれないという感じですかね。
アプリはすぐ作れる。あとはアイデアのみ
これを触ってて思ったのは、アイデアがあればアプリ化は楽だなということです。アイデア自体がとりとめもないものならば、アプリ自体の価値も低いでしょう。ということを「可視化」して検証できることが価値があると考えました。
アイデアがない人はこの手のツールを使っても結構辛いです。逆にアイデアがある人はglideで形にすればいいです。そして検証していけばいい。このプレトタイプ的なプロトタイプ的なものが即効作れるのはかなり良いといっていいでしょう。
ご相談お待ちしております！
glide使ってアプリ作りたいけどこんなことはできそうか、有償でお願いしたいなどのご相談あれば問い合わせからご連絡ください。
ここに書いてあるアイデアカフェレベルのものであれば、プログラマであれば余裕ですが、非プログラマやあまりITが得意でない人には驚きが少しはあるかもしれないなあと感じたからです。
何かお役に立てれば幸いです。
