料理レシピをまとめたクックパッドのようなアプリを作ろうとしています。入力データが膨大な量になってしまい、どのようにデータをまとめたらいいかよく分かりません。Adaloで料理レシピなど作った経験のある方がいればアドバイス願います。Adaloでは無理でしょうか?
クックパッドのサイトを真似して簡単なレシピアプリを作りました。説明するとものすごく長くなるのでアプリを載せておきますので使ってみてイメージをつかんで下さい。レシピは現在は1個だけしか入っていません。カスタムリストのレシピデータをクリックすると別画面で詳細画面が表示されます。
(画面イメージ)
(開発画面イメージ)
(参考アプリ)
今日とりあえず作っただけです。改善点は山ほどあります。(userデータベースで数のカウントしているのでログインが必要です。)クローンコピーになっていますので中身見られます。
(一番苦労した点)
材料の表を2つのプロパティだけにまとめたところです。
データベースとボタンに設定したActionの内容を見て理解して下さい。
データベースは1行しかありません。レシピが増えればその数だけ行が増えます。
(アドバイス)
~更新・修正(Update)機能を充実させる~
実際アプリを作ってみて感じたことです。データの修正機能がポイントかと思いました。今回はとりあえず作ったのでデータの追加、修正機能は無いんですが、とりあえず分かっているデータだけ入れて後から修正するというのが実際的な使い方かもしれません。
とにかくデータ量が多いので画像が1枚足りないとか、材料の分量が一部分からないとかいろいろ出てくると思います。そういう場合に、例えばもう8割がた入力をしているのに足りないデータがあるからといってまた1からやり直すのでは非常に大変です。
データが膨大なのでやっている途中で不足しているデータが分かってくるという事があると思います。材料や作り方の入力でも何を見て入力するのかという問題もあります。今回はクックパッドのサンプルページを開きながらコピー・ペーストでやりましたが、完成形と同じデータがどこかにあってそれをコピーするような形にしないと入力が大変です。(何も見ないで考えながらやっていたのでは途中で嫌になってくる。)
膨大なデータを簡単にしかも正確に入力できるようにする仕掛けがこのアプリのポイントでしょう。頑張って作ってみて下さい。私はこれ以上作りませんので。
0941さん
ありがとうございます。
自分が詰まっていたところが分かりかけてきました。
悩み過ぎて、訳が分からなくなっていたので助かります。
これから、中身を見て勉強します。
0941さん
いま、中身をのぞいているところです。
自分が、間違っていた箇所や、やりたかったことは、このようにやればいいのかと驚きと、感謝でいっぱいです。
意地でも、完成させてみせます。
完成させますと言いつつ、相談しているかもしれませんが
ありがとうござます。
分かりますか?分からない部分は遠慮なく聞いて下さいね。
以前に質問受けて回答してなかった部分
1.クローンコピーのURLはどこで設定するのか?
Setting→App Accessの部分にあります(下記画像参照)
2.NoCodeForumは回答が来てもメールのお知らせが来ないのか?(メールの設定してるのに)
→確か去年の中頃までは来ていたような気がします。今は設定が変わったのか来ませんね。回答もらっても気づかないことが有りますね。
3.Adaloの無料範囲でのデータベース行数
・・・今は確か200行だと思います。私がadaloを始めた2年前は50行だったのですが、去年の初めごろから200行になりました。しかしまた50行に戻ったとのネットの書き込みもあり、混乱しています。
私は有料会員($50/月→今はこのコースが無くなった?)なので関係ないですが。
多分200行越してもデータベース動くと思いますが、頻繁にやっているとAdaloから警告が来て動かなくなったというネット情報もあります。
無料会員じゃAPI等の外部接続が出来ないので何も出来ないですよ。ちゃんとしたアプリを作りたいなら有料にしてみたら。
私はAdaloの他にClickというNoCodeでもアプリを作っています。Adaloとほぼ同じような内容の国産アプリです。日本語が使えるのと無料でもAPI接続等ができるので重宝しています。(但し、データベースは100行まで。APIはひと月に50回までの制限あり)
何故、レシピアプリをAdaloで作ろうとしているのですか?クックパッドのURLを保存しておけばよさそうな気もしますが。(そうじゃない理由があるんだと思いますが)
0942さん
おはようございます。
・Cloneable(Screens & Data)設定することができました。
・何故、フリープランでやっているのか?もう一つの、何故、アプリを作成しているのかにもも関ってくる問題でした。
先ずは、自分が本当に最後まで、アプリの作成を完成させることができるのか?
やりたいことが、無料でどこまでできるのか?
有料ならば、出来ることを無料で可能にするためにはどうしたらいいのか?
これらを、クリアできたら、次のステップにいけるのではとおもいました。
自分への、挑戦というか、自分の可能性を信じたかったというのもあります。
大げさではありますが。。。。。
病気になって、現在も治療中なのですが自分に自信が持てなくなって、そうこうしている内に、子供が生まれ、日々、子供に感謝していたら元気が少しづつでてきまして、adaloに挑戦してみたんです。
また、なぜ料理のレシピ管理アプリなのかといいますと。
普段から、料理はよくしているのですが特定のアプリを使用しているわけではなく、いろんな料理のアプリを使用していました。
一つひとつの、料理アプリのお気に入りなどに追加・保存してしょうしていました。また、ニュース総合サイトなんかで紹介されている、料理のレシピなんかにも目も通していましたので、気に入ったものがあると、共有ボタンからブラウザーで開いて、ブラウザーのお気に入りに保存するようにしていました。
こうなってくると、あちこちにお気に入りのデータが存在し、それらを整理するのも大変だし、活用できずにもいました。
そこで、先ずは、全てをメモ帳に保存すれば一元管理に近いのではと?。
タグを付けて保存すれば、タグのみで管理もできますし、フォルダを作成し専用フォルダとして管理もできるから良いかなとおもいました。
しかし、欲が出てきて、もう少し便利に使用ができないものかと考え、「料理レシピ管理アプリ」で検索をかけて見ることにしました。そこで、気に入ったアプリを発見したものの、一定の件数を超えたら有料になったり、別のアプリにすると、これが足りない、あれが足りないとなって結局は、満足することができませんでした。そこで、出会ったのがadaloです。
長い、説明でしたね
自分が作成していた物に、0941さんから教えていただいたものを応用して、ほぼほぼ、形にすることができました。
しかし、現状、見えている問題として、やはり
空白でも保存されることでしょうか?
・「Sometimes Visible」で、条件によって表示されることにはなっていますが見えてないだけでデータは存在しています(これは、料理によって材料数が違うため、対応するための処置)。
そのため、18個フォームを作成し5個だけ表示。
それ以外の、13個は「Sometimes Visible」で設定。
この設定で、動作確認してみました。
標準で、表示されている5個のみを対象にして検証しました。
・5個のみ、データー(材料)入力し保存。
保存した、内容を表示する「Detail」を確認。
5個の、材料が表示され、その下の「作り方」を表示している間に、大きな空白地帯ができるを確認。
※Databaseの、材料を登録する箇所を確認すると、入力されている材料がないにもかかわらず、空白ができていました。この、空白を削除して再表示するときれいに隙間なく表示されています。
このような、結果となりました。
「料理によって材料数が違うための処置」とはいえ困りましたね。
「データ送信」を押下するときに、入力されていない空白のデータは削除するようにできれば、問題ないんですが。。。
0941さん
悩んでいる箇所も、有料にすれば解決できそうですよね?
・API OCRとかで文字起こしをして、「材料・分量」とか簡単に編集ができて保存するとか。
・googleスプレッドシートを使用せずに、画面上に献立一覧表が表示され、その中から買い物が必要なもののみにチェックを入れ、更新し買い物リストが表示されるみたいな。
そうか~。そういう欠点があったか!おっしゃるように確かに空白行が出来てしまいますね。
(とりあえずの解決方法)
(×)1つのプロパティに複数のインプットを縦に詰め込む→(○)1つのインプットは1つのプロパティにする
上記のようにしてsometimes visibleで設定すればデータが入ってない部分は空白行にはなりません。
しかし、これをやるとプロパティの数が100を超えてしまい管理が大変になってしまう欠点があります。
(疑問)
材料の表を作るときどうして単位を別のプロパティにしているのですか?一緒にすれば25個のプロパティを少なく出来ると思うんですが。
(その他)
Adaloの有料会員になると急に出来る事が増えるわけでもないです。自分のイメージとしては無料会員で出来る事が量が増えても不自由なくできるといった感じです。
API等が相当使いこなせないと出来る事は増えないです。何でも出来るようになるというのは幻想です。
0941さん
早速の、回答ありがとうございます。
疑問に、お答えします。
excelの癖なんですかね?
どいうしても、分けて考えちゃうんですよね。
この、アプリを作ろうとおもったのも、料理のレシピを管理しやすくしたいこと。
それと、一番大事な買い物リストを作りたいということです。
それで、今後の事を考えて、分けてました。
ただ、リスト化の仕方も、現時点では考えついていないのでどうにも、こうにもなんですけど。
同じ、材料で並ぶようにフィルターが掛かって、且つ、チェックしたものが買う物として、再リスト表示できるようになれば最高です。
0941さん、追伸です。
API OCRの話は、他のアプリでの使用が魅力的で使えないかなと考えていました。
今は、先ずは無料で頑張る!学ぶがあったので、優先していないのですが。
実際の、仕様です。
こういった、料理の材料が記載されている画面をスクリーンショットします。
次に、アプリでまとめて入力を選択して、スクリーンショットした写真を選ぶと、四隅にサイズが調整できるようになっています。
こんな、感じです。
サイズが決まり、読み込むと文字として表示されます。
それを、材料名→改行→単位→改行
これを、繰り返して保存します。
そうすると、このように材料と単位で分かれて保存ができるんです。
写真じゃなくても、文字をコピーペーストして、材料名→改行→単位→改行
これを、繰り返して保存すると、同じような形なります。
今、作成中のは、一つひとつ、コピーペーストなんで、時間も掛かるし大変だなとおもって。
これらの、機能は便利だなとおもいました。
0941さん
(とりあえずの解決方法)として、教えていただいた方法の確認です。
(×)1つのプロパティに複数のインプットを縦に詰め込む→(○)1つのインプットは1つのプロパティにする
上記のようにしてsometimes visibleで設定すればデータが入ってない部分は空白行にはなりません。
①
②
③
③のように、「材料」「分量単位」で分けて登録するという理解でいいでしょうか?
また、「sometimes visibleで設定すれば」に関して、設定はどのようにすればいいのでしょうか?
お願いします
その通りです。③のようにやればいいです。
レシピを表示するページに材料と分量を表示するためのtextコンポーネントを2列×25行並べます。
一つ一つのコンポーネントにsometimes visibleの設定をします。入力データがあれば表示すると設定します。元データが無ければ表示はされず、Adaloのレスポンシブルの機能で空白は出来ません。
0941さん
返信ありがとうございます。
設定、その通りにやっているとおもうのですが上手く表示されません。
何か、間違っているでしょうか?
①
②
③
④
このように、空白ができてますのです。
何かを、まちがっているでしょうか?
やっていることは間違いないと思います。ただ私が疑問に思うのは「空白ができています」と書かれていますが、どこに空白があるのですか?確かに材料表の下には空白のエリアがありますが、ここが動作がおかしくて空白になっているのですか?
→下に来る段落(文字列)が無いのでどこが空白になっているのか分からないのです。
(やってほしいこと)
~空白エリアの確認~
材料は25個書けるようになっているんですよね?だったら25個目のすぐ下に何か文字列を入れてみて下さい。試しに材料データを8個ぐらい入れてみてプレビューしたときに最後の材料名のすぐ下に追加した文字列が来ているかどうか確認してみて下さい。ここに大きな空白が出来るならばvisiblityの動作がおかしいことになります。
最後の材料名のすぐ後に追加した文字列が表示されて、その下に巨大な空白がもしあるようならば、最初から材料表の下に巨大な空白があるということです。(それはご自分でそういう設定をされて、プレビューした時にその通りに表示されているだけの事です)
Adaloのレスポンシブルは図形や文字列がvisibilityの設定で非表示になった時にスペースが詰まるという機能で、非表示にはならない図形や文字列のスペースはそのまま維持されます。
0941さん
返信ありがとうございます。
入力フォーム、間をあけて下部の方に仮データを入れてみました。
入力されていない、空データは表示されずに仮のデータ(英字)が表示されています。
その後、枠外(sometimes visibleで見えていないが入力フォームがある位置)に、入力フォームを設置しました。
そうすると、やはり「sometimes visibleで見えていないが入力フォームがある位置」に空白ができています。
これは、仕様なのでしょうか?
データの、入力がなければ表示しない、入力された分だけ表示するものとおもっていました。
もしかして、私が勘違いしていたのでしょうか?
それとも、何かの設定を私が間違ってるのかもしれないということでしょうか?
何ででしょうね?よく分からないです。ただ、書かれている内容で疑問に思う点もあります。
(疑問に思う所)
材料表には表示のためにtextコンポーネントが25行あるんでしょう。下記の画面では11行使っているので空白行は14行あることになります。しかし見たところ空白行は8行分位しかありません。visibilityの設定で非表示になっている部分とそうでない部分が混在しているような気がします。
visibilityの設定をもう一度見直してみて下さい。データが無い時は必ず非表示になっているかどうかもう一度確認して下さい。
私も簡単なアプリを作って動作確認しながらこの回答書いているんですが、私のやり方だと空白は出来ませんよ。どこかちょっとした部分に間違いが潜んでいるような気がします。
私が今回検証用に使っている簡易アプリを載せておきます。材料入力欄も25行分あります。これで適当なデータを入れて空白が出来るかどうかやってみて下さい。(空白は出来ないと思うんですが・・・)
(簡易アプリの画面)
簡単に使えるようにログインはありません。→userデータベース使わないので材料入力欄の表示数も固定になります。
(レシピ表示画面における材料データのViibility設定)
(簡易アプリ)クローンコピー可能です
どこで間違っているか分からないので、最低限の機能だけを盛り込んでもう1個別のアプリを新規に作ってみたらどうですか?(どこで間違っているか分かり易くするために)
以前共有してもらったアプリの中身を見ています。材料リストの下に空白が出来るのはアプリに空白を入れているからそうなっているだけじゃないんですか?
料理の種類によって最終的な詳細表示画面を2種類(Detail/Detail2)作っているようですが、空白が出ると言われている肉じゃがレシピは右側のDetail2画面で表示されていますよね。(なぜか分かりませんが、もともと空白を入れているのでそれがそのまま表示されているだけと思いますが。違いますか?Adaloのレスポンシブルは別におかしくないです。)
0941さん
ご指摘、ありがとうございます。
あれから、いろんなことを試してみたんですが改善せず、結局は作り直して隙間は改善しました。
でも、指摘の隙間だったのかもしれませんね?
別の隙間で、一つ伺いたいのです。
3/30日に、0941さんが試験的に作成して教えてくださった「レシピ入力」の表示で空白部分があるのですがこれは仕様なのでしょうか?
私も、同じように空白ができます。
設定は同じです。
違うのは、画像のサイズ、配置です。
仕様のでしょうか?
とうとうこの隙間にも気が付いてしまいましたか!これをネタにnoteにブログを投稿しようと思っていたところです。
1.隙間が出来る理由
・・・私が最初作ったアプリでは料理の作り方を表示する画面で作り方各工程の間に微小な隙間を設定していました。(下図参照。画像と画像の上下の隙間の事を言っています)
例えば作り方工程が20行設定されていて8行分のデータを入れたとすると、残り12行分の画像とインプットは非表示になります。画像とインプットの部分は確かに非表示で見えなくなるのですが、画像と画像の間(上下方向)にあらかじめ配置した隙間の部分は残ったままになって、これが累積して何もない隙間エリアが発生します。
2.隙間を無くする対策
私の作ったアプリで説明すると、行と行の隙間を無くせばいいのです。具体的には画像と画像の間にスペースを入れずぴったりくっつければ隙間は出来ません。
しかしこれでは工程間がくっつきすぎて見づらいという事もあると思います。これの対策は以下のようにして下さい。
3.工程間に隙間(スペース)を入れてかつ、最後の部分に隙間を作らない方法
私の作ったアプリで再度説明します。インプットと画像がちょうど入る長方形より若干縦方向に大きい長方形を作って配置し、その上にインプットと画像を配置します。この長方形を上下方向に隙間なく配置します。この長方形にもvisiblityの設定をすれば工程間に隙間を保ちながら、データが無い部分は隙間を作ることなく非表示にすることが出来ます。
(補足)
後から長方形を作ってインプットと画像の裏面に入れるにはコンポーネントのArrange機能を使って下さい。(Visibilityと同じところにあります。最背面に配置「Send backward」を使うのがいいと思います)これ知らないと最初からやり直すようになってしまいます。
(コツとポイント)
Adaloのレスポンシブルの機能はインプットや画像、テキストなどの部分が非表示になると、そのコンポーネントが占有していたスペースが詰まる(縮む)という機能です。
しかし、画像などのコンポーネントを上下方向に配置した場合、隙間を開けて配置するとその隙間の部分はvisiblityには関係ないのでいつまでも残ります。それが累積されて画面の最後の部分に大きな隙間が出来てしまいます。
隙間を無くすにはAdaloのレスポンシブルの機能をよく理解し、消える部分と消えない部分があるという事を意識しながらコンポーネントを配置するようにして下さい。
私もここまでAdaloのレスポンシブルや隙間について真剣に考えたことが無かったので勉強になりました。
(その他)
この質問結構長いので検証用のアプリを何個か作りました。作っている最中にいろいろなひらめきがあり、ちょっとそれを後でまとめてお伝えします。(使い勝手改善に関するものです)気が向いたら投稿します。