RED & BLACK

観劇日記

Glideで作った自分用レシピブックが便利だった

自炊していると、献立に悩むことが多い。冷蔵庫に白菜とにんじんがあったから使わなきゃイカンと思い、スマホを取り出し検索窓に「白菜 にんじん レシピ」と打ち込み、出てきたものを作る。そうすると、毎回微妙に違うものができてしまう。

なので、自分のレパートリーの中から、冷蔵庫にある材料を使って作れる料理を調べられるシステムを構築したいと思っていた。以前、Evernoteを使ってレシピを管理しようとしたこともあるのだが、面倒なので一瞬で挫折した。

そういうアプリはないかなと思ったが、意外と見つからない。自分で作ろうにもそんな能力はない。

 

そこで、ネットを探していたら、"Glide"というサービスを見つけた。何と、プログラムを書かずにウェブアプリ(というのか分からないが)が作れるらしい。しかも無料だそうだ。

Googleスプレッドシートを使って、データ入力や検索ができるようだ。私のやりたいことにピッタリだ。早速使ってみた。 

 

*2021/11/28 追記:2021年にGlideの編集画面が変更になったそうだ。以下は変更前のままだが、参考にはなると思うので残しておく。

 

 

完成図

以下ができるように作成した。

スマホから、レシピのデータ(名前、材料、リンク先、写真)を入力・削除・修正ができる

・レシピのデータを材料で検索できる

 

アプリ作成

データシートを作成

まず、Googleにログインし、Googleスプレッドシートにデータシートを作る。今回の場合、材料を調べるのが主目的なので、こんな感じにした。行はこんなに必要なくて、1行でOK。

f:id:iceisland:20201211223154p:plain

 

Glideにログイン

Glideのサイトにアクセスし、Sign Upボタンから自分のGoogleアカウントでログインする。

 

アプリを作る

Built an appからCreate app from Google spreadsheetを押し、先ほど作ったスプレッドシートを選択。

f:id:iceisland:20201211223829p:plain

もうアプリっぽいのができた!すごい。

f:id:iceisland:20201211224052p:plain

 

設定

レイアウト

レイアウトを決める。

画面右側のPropertiesからLayoutのところでレイアウトを選ぶことができる。私は検索に使いたいだけなので、Compactにしたが、自分の料理の写真を撮るおしゃれな人だったら、TilesとかCardsにするとよさそう。

Settings(歯車アイコン)のAppearanceのところで、テーマカラーやデザインも選べる。

こんな感じになった。

f:id:iceisland:20201211224726p:plain

 

データ入力フォームの作成

アプリ側からデータを追加できるようにしたい。

そのためには、Layout画面のADDのAllow users add itemsにチェックを入れる。

そして、データ入力の際は、手入力じゃなく、プルダウンメニューから選択できるようにしたい。やり方が書いてある動画を見つけたので、この通りにやった。

youtu.be

まず、スプレッドシートに新しいタブを作り、選択肢のデータを入力する。

f:id:iceisland:20201211230005p:plain

 

ADDの右上にある+マークから、Choiceを選択して、設定を行う。写真を取り込むのも、同様に+マークから、Image Pickerを選ぶ。(Imageではないので注意)

f:id:iceisland:20201211225843p:plain

これで入力フォームが作成できた。

f:id:iceisland:20201211230454p:plain

 

データ編集できるようにする

また、一度入力したデータの編集もできるようにしたい。

アプリ画面に表示されているデータのどれかをクリックすると、Components画面が開く。Editを押し、Allow users to editにチェック。プルダウンなどの設定は先ほどと同じ。

f:id:iceisland:20201211230633p:plain

 

フィルター機能を追加

デフォルトの状態で、すでにホーム画面に検索窓ができている。しかし、「白菜 にんじん」のように複数の単語を検索することはできなかった(何か方法がある気はするが、分からない)。1個の単語でしか検索できないと不便なので、フィルター機能を使うことにした。

Feasures画面のIn-app filterのところから、フィルターに使いたい列(今回の場合は「材料」)を選択。こうすることで、1個の材料でフィルターした後、別の材料で検索できるようになった。若干不便だが、これでいいことにする。

これで完成!

 

プライバシー設定

プライバシーの設定をする。歯車アイコンのSettingsから、Privacyアイコンをクリック。私は自分だけで使えればいいので、Only I can sign inにする。家族と共用にするのもいいかもしれない。

Shareボタンを押すと、QRコードが表示されるので、スマホで開く。ホーム画面に追加すると、アプリのようにして使うことができる。

 

我ながらけっこう便利なものができて満足。便利な世の中になったものだ。

 

References

以下のページを多いに参照しながら作りました。ありがとうございます。

hikari-sedori.com