流行りのGlideでプログレアプリ(PWA)してみた

### 技術書典６アプリ撃沈
　「技術書典」サイトで、サークル主体のチェックリストは、ほしい薄い本のリストが作れず、いつも不便だと感じていた。

　技術書典６開催週に、Glideがバズっていたので、薄い本のチェックリストとサークルへのコメント機能付けたPWAを作ってみたのだけど、事務局にデータ利用は許可してないと言われてクローズした。

<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">こちらですが基本的にはAPIやデータの外部での利用はお断りしております。 <a href="https://twitter.com/kmuto?ref_src=twsrc%5Etfw">@kmuto</a> さんは技術季報制作を請負頂いてる契約関係にある方としてのコメントだと思いますが、サークル様の著作物もあつかっており、第三者の利用は今後の検討事項として対応進めてるところです</p>&mdash; mhidaka@技術書典 (@mhidaka) <a href="https://twitter.com/mhidaka/status/1116233440662155264?ref_src=twsrc%5Etfw">April 11, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">すいません。基本的には見づらくて困るという話は重く受け止めてて、パワー足りてない我々の問題であると理解してまして、こういう改善がエンジニアがすきにすすめていけるようにAPIのトークン化や設計をやっていってますが、まるで追いついてないです。ご迷惑おかけしてます。。。</p>&mdash; mhidaka@技術書典 (@mhidaka) <a href="https://twitter.com/mhidaka/status/1116235391307112448?ref_src=twsrc%5Etfw">April 11, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

　スプレッドシートを公開編集可能にして、サークル主に記載を促してみたが、参加してくれる人は出なかったw
　しかし、サークルに対してコメントできるのは良い、という意見はもらった。

### 技術書同人誌博覧会
　４月中旬に「技術書同人誌博覧会」のアナウンスがあって、エントリしたついでに関係者に技術書典６アプリの残骸を見せてみた。

<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr"><a href="https://twitter.com/ariaki4dev?ref_src=twsrc%5Etfw">@ariaki4dev</a> PWAアプリでしたら、Glideで作ると便利ですよ。Googleスプレッドシートでリスト作ると、そのままアイコン保存できるアプリになります。こういうシートで <a href="https://t.co/BKFpBi975o">https://t.co/BKFpBi975o</a> こんなアプリ <a href="https://t.co/XHrESUehNR">https://t.co/XHrESUehNR</a> になります。</p>&mdash; kinneko (@kinneko) <a href="https://twitter.com/kinneko/status/1120953005992366080?ref_src=twsrc%5Etfw">April 24, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">おおっすばらしい！いまFirebase使って～っていう案が出てる所でした。<a href="https://twitter.com/mottox2?ref_src=twsrc%5Etfw">@mottox2</a> 補足</p>&mdash; ariaki (@ariaki4dev) <a href="https://twitter.com/ariaki4dev/status/1120959889512099840?ref_src=twsrc%5Etfw">April 24, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">こちらではデータ再利用はできる限りオープンにしていく予定です！<br>詳しくは確定次第ご連絡しますね。むしろ良い感じのものを作っていただく方が早いかもしれません。</p>&mdash; ariaki (@ariaki4dev) <a href="https://twitter.com/ariaki4dev/status/1120962752434933760?ref_src=twsrc%5Etfw">April 24, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


　好反応だったので、もう少し手を入れて技術書同人誌博覧会アプリを作ってみることにした。

<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">&quot;技術書同人誌博覧会2019&quot; アプリ作ってみた。Glideだと、表現力に限界があるな。 <a href=" https://gisyohaku2019.glideapp.io"> https://gisyohaku2019.glideapp.io</a> <a href="https://twitter.com/hashtag/%E6%8A%80%E6%9B%B8%E5%8D%9A?src=hash&amp;ref_src=twsrc%5Etfw">#技書博</a></p>&mdash; kinneko (@kinneko) <a href="https://twitter.com/kinneko/status/1121061798633803777?ref_src=twsrc%5Etfw">April 24, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


### ネーミング最悪
AndroidのGlideとかぶるので、ググらビリティが極端に悪い。
音は同じで、少しスペリングを変えるとかできなかったのか。
ブランディング重要。
glideappでも良かったのじゃないか。

### 公式のドキュメントはイマイチ
公式のドキュメントは、ここにある。

https://docs.glideapps.com/all/

動画などもあるけど、機能が少ない現在は、おそらくこういう画面を作るには、こうしたらいいというようなTipsが求められるのではないかと思う。

### 掲示板は活発
Spectrumにコミュニティ掲示板が作られている。

https://spectrum.chat/glideapps?tab=posts

しかし、投稿内容は薄い感じ。

### 普通に画面を作りたい時
<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">Glide、文字表現が基本的なmdだけなのでつらい。HTMLタグも使えるとあるけど、端末によって画面が崩れるので非推奨とも書いてある。<a href="https://twitter.com/hashtag/Glide?src=hash&amp;ref_src=twsrc%5Etfw">#Glide</a> <a href="https://twitter.com/hashtag/pwa?src=hash&amp;ref_src=twsrc%5Etfw">#pwa</a></p>&mdash; kinneko (@kinneko) <a href="https://twitter.com/kinneko/status/1121208737425809408?ref_src=twsrc%5Etfw">April 25, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

画像はURLで呼び出せるようになっている。どこかのサイトに置くか、Google Driveに置くことになる。

### 地図の表示
<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">住所でマップを表示できるのだけど、一番寄ってもかなり広いエリアしか表示しないし、地図はただの画像なので拡大もできない。タップでMapsアプリに飛ばされるだけ。<a href="https://twitter.com/hashtag/Glide?src=hash&amp;ref_src=twsrc%5Etfw">#Glide</a> <a href="https://twitter.com/hashtag/pwa?src=hash&amp;ref_src=twsrc%5Etfw">#pwa</a></p>&mdash; kinneko (@kinneko) <a href="https://twitter.com/kinneko/status/1121209686353534976?ref_src=twsrc%5Etfw">April 25, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

やはり、アプリの中で地図の拡大縮小くらいはしたいもの。

### 誰かにアプリを伝える
<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">QRでシェアの画面は、ハードコードされていて、トップ画面の○にiのボタンでしか呼べない。画面の編集もできない。不便だな。任意にQRをImageで呼び出しとかできればいいのに。 <a href="https://twitter.com/hashtag/Glide?src=hash&amp;ref_src=twsrc%5Etfw">#Glide</a> <a href="https://twitter.com/hashtag/pwa?src=hash&amp;ref_src=twsrc%5Etfw">#pwa</a></p>&mdash; kinneko (@kinneko) <a href="https://twitter.com/kinneko/status/1121210191599419392?ref_src=twsrc%5Etfw">April 25, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

シェア画面からトップ画面に戻るのも、iアイコンのあったのと反対側に"Done"ボタンが文字であるのでわかりにくい。
こういう告知画面は、任意に作りたい。

しかし、QRの画像を作って置いておくのもめんどくさい。変わったら貼り直しとか嫌だ。
しょうがないので、スプレッドシートにタブを１つ追加して、QRの画像の生成はGoogle Chart APIに頼ることにした。以下のようなリンクを書いておいて、Glideからはimageで呼ぶ。

http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=https://gisyohaku2019.glideapp.io/

### 掲示板はザル
コメントをページに貼ることができるのだけど、メールアドレスでのユーザー確認を付けられる。これはザル。パスワードとか求められるのだけど、何を入れてもいい感じ。誹謗中傷に耐えられない。
アプリ全体をメール認証にする運用が必要かもしれない。

### アプリトップ画面がカスタムしにくい
アプリ名とアイコンを１つ貼ることができ、背景色を指定できる。でも、それだけ。
アイコンは中央に小さく表示されるだけ。見栄えはまったくしない。
おまけに、次回起動以降は表示されない。
自前でトップ画面を別に作ったほうがいいだろう。

### いいね！ボタン機能はない
ちょっと痛い。

### 共有機能がない
PWAのよいところを活かした、ディープリンクをシェアするような機能はほしいところ。

### アクセスログが取れない
利用履歴的なものが取れないので、利用分析などはまったくできない。
"A few user in the last 30 days."くらいの表示をされても、何の役にも立たない。

### 表示画像の拡大ができない
Imageで貼った画像を拡大することができない。
携帯に特化したサイトなどではありがちな問題なんだけど。PWAなのでブラウザ側で解除して拡大することもできない。
書影や地図などを詳しく見たい場合は不便だ。

### カタログ的なアプリには向いている
何かのリストを表示するような機能は充実しているので、カタログ的な使い方が向いているのかも。
思いついたらすぐに作れるのは便利。
ただし、それ以上のことはないので、過大な期待は禁物。
今後に期待。

### メールアドレスでの認証は個人情報保護なんとか的に面倒
スプレッドシートに生のメールアドレスが記録されることになる。
なんか、ハッシュ的な処理にしておいてほしいところ。
SMSで送られてくる４桁パスコードはシートの中には保存はされていない。
Glide側のバックエンドで保管されているという中の人のメッセージがあった。

### ホームへのアプリの登録
初回は画面下に表示が出るのだけど、登録せずに終わった二回目以降は表示が出てこないような。
PWAとして、デフォルトでホームに登録... とかは無謀か。

### Glideと関係ないけどPWA呼びにくい
PWAアプリだと、アプリアプリでアレ。
PWAだと、まだ認知低くてナニソレ感がある。
PWアプリだと間抜け。
通称はプログレアプリとかになるんだろうか？
Qiitaのタグに入れて置こうw
ついでに、タイトルにも入れておこうw

### 気づいたことがあれば追記するかも...
Glideで作る簡単なモックアップアプリの制作依頼などありましたら、ご依頼くださいw

### メイカーズナイトで発表してみた

「NTP時計作ってみた」「CO2センサ買ってみた」「PWAで作るイベント用アプリ」
https://www.slideshare.net/kinneko/ntpco2pwa
@Maker Starter #61 ～Maker's Night 49～
2019.4.26　平成最後のプレミアムフライデー！

## choice機能がリリースされたので使ってみました
[プログレアプリGlideappsにchoice機能が追加されたので使ってみました](https://qiita.com/kinneko/items/99a67faa231226335ba6)

## 関連ドキュメント
・[流行りのGlideでプログレアプリ(PWA)してみた](https://qiita.com/kinneko/items/548597770d93aa17c6cf)
・[プログレアプリGlideappsにchoice機能が追加されたので使ってみました](https://qiita.com/kinneko/items/99a67faa231226335ba6)
・[Glideappにコメント/チャットのメッセージ追加を通知する機能が付いたので試してみた](https://qiita.com/kinneko/items/654c2a1e6e13d9c9592c)
・[Glideappsでfav機能が評価中なので試してみた(リリースされました)](https://qiita.com/kinneko/items/d4fae3ae26d358b130ba)
・[「5分で作れる！Glideappsではじめる超簡単PWA」セッションで利用する予定のデモ動画とプレゼン資料](https://qiita.com/kinneko/items/2d15a7cb87cb17a483a7)
・[Glideで画像アップロードの機能のテストが開始されました](https://qiita.com/kinneko/items/6831572cf3cf12a4a4e3)
・[Glideのリスト表示で地図と連携表示する機能のテストが開始されました](https://qiita.com/kinneko/items/79e84181ab7c0bcef88d)
・[Glideで画面のリロードをさせるための対策](https://qiita.com/kinneko/items/dec896995aca30b91ec6)