@numa08 猫耳帽子の女の子

明日目が覚めたら俺達の業界が夢のような世界になっているとイイナ。

Goobike のお気に入りを保存するアプリを作った

プロトタイピングくらいなら、コードを書かずにいけるんじゃないかな・・・。出来上がったものがこちら。

f:id:numanuma08:20191222021616p:plainf:id:numanuma08:20191222021633p:plain

github.com

やったこと

Goobike で見つけたバイクをスプレッドシートに保存し、リストで表示するやつを作った。

モチベーション

バイクを売って1年も経っていない今日このごろ、謎のフラストレーションが溜まってきてバイクに乗りたくなってきた。やっぱり一人でお出かけをするのが好きだし、車にはない身軽さや冒険がバイクにはある。でも今は駐車場とか移住計画とかがあって買うべきじゃない。それならばせめて、Goobike でお気に入りの登録だけでもやっておいて買うべき時が来たときにスムーズに買い物ができるようにしたいと考えました。ただ、 Goobike のお気に入り登録機能はちょっと残念。具体的には次の点。

  • お気に入りに登録できるのは10件まで
  • アプリで同期ができない
  • お気に入りに登録した商品が売れても気が付かない

登録上限はなぞの仕様ですが、それ以外については普段から複数の端末を利用するのがデフォなので結構困る。せっかくAndroid/iOS向けにアプリを出しているのだからしっかりして欲しいところ。と、文句を言っても仕方がないので自分でなんとかすることにしました。

技術スタック

これくらいのことならコーディング不要では?と思ったけれど、結局 Google Apps Script を使いました。

Google Forms

お気に入りに登録したい商品の URL を入力するフォーム

スプレッドシート

Google Forms の入力結果を保存する。Google Apps Script をトリガーして結果を保存する

Google Apps Script

Goobike からデータをスクレイピングしてスプレッドシートに書き込む。Claps を使って Typescript で記述。

github.com

Glide

スプレッドシートのデータをいい感じにアプリっぽく表示するやつ。

go.glideapps.com

感想

Glide は時々話題に上がっていたので使ってみようと思っていたところ。今回のやりたい事的にマッチしてたのでチャレンジしました。アカウントを作ってダッシュボードを開くとチュートリアル動画が見れました。1個3分くらいの短いやつ * 10個くらいだったので子どもをあやしつつ字幕を表示して閲覧。スプレッドシートの表示だけじゃなく、データの入力や編集、編集をトリガーにした条件分岐など思ったよりもいろいろなことができるっぽいです。今回はほとんど表示だけだけど。

Glide を使うならスプレッドシートだな、スプレッドシートを使うなら IMPORTXML 関数を使えばいいな〜 と軽く考えていたのですが、実際には GAS を使いました。理由はまず Goobike のページが euc-jp でエンコードされていて IMPORTXML 関数が使えなかったから。そして IMPORTXML 関数はスプレッドシートを開く度に HTTP 通信が実行されて現実的じゃないと考えたからです。主に最初の理由が大きい。Clasp のお陰で GAS を Typescript で書けるのはいいのですが、いい感じの XML パーサーが無いのがつらいところ。GAS デフォルトのやつはちょっとしんどい。今回は手を抜いてパーサーライブラリを使いました。

https://script.google.com/d/1Mc8BthYthXx6CoIz90-JiSzSafVnT6U3t0z_W3hLTAX5ek4w0G_EIrNw/edit?usp=drive_web

抜き出したい文字列の前後の文字列を指定して抜き出す、なんだか不思議なやつですがまあ良いでしょう。これ使わないなら正規表現芸かなって思っていたし。

これらの構成が決まってから実装が完了するまでは2時間くらいで終わりました。ツールが揃っているのは良いことだ。ただ構成を考えるのにやや時間を使ってたぶん3時間くらいは考えていたかと思います。できることなら GAS を使わないでやりたかったなぁ。

課題

同じURLを除去するとかスマホ版のページに対応をするとかある気がするけど、まあぼちぼちやったりやらなかったり。