見出し画像

glide みんなの読書記録アプリを作る 途中編

glideについては、超簡単な記事を以前書いた↓

ノンプロ研のコミュニティアプリはglideで作られている。
そこから派生して、みんなの読んだ本や、読んだ冊数、書評やコメントを見ることができる読書記録アプリを作ることになった。

ノンプロ研のコミュニティアプリがどのように作られているかも書きたいけど、まずは記憶の新しいうちに、現時点の読書記録アプリ作成状況をメモしておく。

ノンプロ研では「みんプロ」≒みんなでプログラミングと称して、ペアプロっぽくZoomで画面共有しながらglideやスプレッドシートを触って読書記録アプリを作っている。

↓昨夜のみんプロのツイートまとめ。最近、ノンプロ研のイベントが多くて裏番組ではPythonも動いていた。

現時点の状況:リレーション問題

基本的な機能、イメージとしては殆ど出来ているが、リレーションの問題が解決していなかった。あとは細かなデザイン、見た目の調整。

読み込んだスプレッドシートをglide上でリレーションしたりLookupできるのだが、どうもこのあたりの設定をミスったらしく、意図する情報を取得できなかった。

文字だけだと分かりにくいので、問題の箇所を画像で説明する。なお、画像はあくまで作成中のものなので、見た目や機能は最終的に変わる場合がある。ご了承ください。

現時点の状況:1.アプリ最初の画面

画面下部の「書籍」「投稿者」のアイコンで画面を切り替える。ここのアイコンも見栄えどうしようかなあ。データ内容は仮でいれてあるので、あんまりそこは気にしないでください。

画像1

画像2

2. 書籍→特定の本のページ。

本の詳細ページ。

画像3

3.本の詳細ページ→書評へ。★ここでリレーション問題?

書評を複数人書いて入れば、その分リストが増える。

で、ここの画面で、データのソースを変えても、アプリ側(glide側)に表示するため欲しいデータがなく、その点でリレーションの設定が何かおかしいのでは?となったが、昨夜は時間もなかったので、この時点で一旦お開き。

画像4


作業手順・詳細

最終的なアプリのイメージに合わせて、まずは元となるスプレッドシートの構成を考え、テストデータを入れて、それをglideに取り込んで動かしながら考える方向。とはいえ、きのぴぃさんの下準備が素晴らしすぎて、当日は私は言われるがままに手を動かすだけというイージーモードだった。

スプレッドシートの構成(4シート)

1.フォームの回答 ※フォームは後から作るので、まずはイメージ的にフォームで集める項目を入れておく。
2.書籍
3.書評
4.投稿者

1.フォームの回答

読書記録アプリなので、データが入ってくる入り口として、フォームを設ける。現時点のイメージはこう。フォームを別で作っておいて、その回答データが溜まるシートは別の既存のスプレッドシートに組み入れることができる。googleさんすげえな、ほんと。

画像5

氏名の表記ゆれ、URLの表記ゆれの問題はあるが、まずはこのまま行ってみる。この回答シートをデータソースとして使う。表記ゆれは運用でカバーなのか...ちょっとした手間でも運用でどうにかするの嫌なんだよなあ。


2.書籍

回答フォームでゲットしたURLをキーにして、そこから書籍の詳細情報をいい感じに引っこ抜く仕組み。最後に、glide側でLike(いいね)ボタンもつけたいので、その項目も入れておく。


画像6

ここで、わたしはうまいことURLをキーにして、うまいことデータをぴゃーっと取りたいです、という「うまいこと」しか言っていないというお気楽さを発揮しました。が、そこはきのぴぃさん、もうしっかり下準備してあって、それぞれ関数やらなんやらで、ほんとにデータがぴゃーっと取れましたよ!

データをぴゃーっと取る手順

URL→各種項目、といた流れでデータを取得していく。

2-1. A列 unique関数

まずはキーとなるURLを回答シートから持ってくるんですが、ただそのまま持ってくるのではなく、unique関数を使って、重複を削除して一意のものにする っていうニクイ演出。unique関数しらなかった。めっちゃべんりやん!今までちまちま重複の削除してましたわよ、ねえ奥さん??

画像7


2-2.IMPORTXML大活躍

タイトル、 著者については、amazonと紀伊国屋の合わせ技でデータを取得。

↓タイトル

画像14


↓著者

画像15


 ↓金額

画像14


↓出版社&出版日

画像15

↓Amazonの星・レビュー

画像16

2-3.ISBN (REGEXEXTRACT関数)

A列のAmazonURLからISBNだけをぶっこ抜いて、適当な列に出します。

画像16

AmazonURLの中には、実はISBNが含まれているのです。あ、これ単行本だけかもしんない、電子書籍は含まれてないか、ずれてるかも。

AmazonのURLをよくよく見ると、真ん中らへんに /dp/ があるので、そのあとにISBNが含まれている。

画像8


2-4.書影(本の表紙画像)

Amazonのページを、chromeの検証ツールでソースを見ると、一定の規則で画像をsrcしているので、それを利用する。らしい。

画像11

画像16

2-5.レート

これはのちのちglideで★マークにするため、MIDとかRightとかで数字だけにしておきます。

画像17


3.書評(ここが回答フォームに置き換わる、統合する感じになる)

ここは基本的に回答フォームのデータを生かすところ。

画像20


4.投稿者

ここはシンプル。読んだ人をuniqueにして、

画像18

読んだ本をカウント。

画像19

ざっと、ひとまず、こんなとこです。

Glide側でどうこうするには比較的簡単なので、形になってきたらまた書くたぶん。

Glide側は本当に簡単なので、元データをどう作るかにかかってるんだなあ。




いいなと思ったら応援しよう!

good-sun(a03)
いただいたサポートで、書籍代や勉強費用にしたり、美味しいもの食べたりします!