ノーコードMagicInstructinosでスプレッドシートからアプリを作成したい

何やらスプレッドシートと連携して、スプレッドシートの値をいじるだけでアプリケーションを作れてしまうようなノーコードツールがあるということで今回はそのツール、MagicInstructionsを見ていきたい。ノーコードツールは探せばもはやたくさん出てくるけど、これは一体どんなツールなのか。

ノーコードツール選びに迷っている人は参考になるかもしれない。では見ていこう。

MagicInstructionsとは

MagicInstructionsはテンプレートを選んで、後はスプレッドシートの値を編集することでアプリケーションを作成する事のデキルノーコードツール。テンプレートは複数用意されていて、飲食や物販・企業向けセールスなど用途に応じて選ぶことができる。

スプレッドシートから入力

作られるアプリはスプレッドシートとそれぞれ連携していて、スプレッドシートにある文言や画像をいじることでアプリにもそれが反映される。スプレッドシート連携は画面の案内に従えばすぐできますね。

それぞれのデザイン編集はエディタで

アプリの画面にあるボタンや見出しなんかのデザインを変更したかったら、それらの部品のデザインを編集する事のできるツールがついているからそれを使っていく。

とはいっても使ってみないと分からないからちょっと使ってみよう。

MagicInstructionsを使ってみる

MagicInstructionsを使って何か作ってみたい。まずはテンプレートを選択するけど、今回はアパレルにしておこう。

テンプレートを選択すると、こんな画面になる。すでにアプリケーションの枠組みは作られているような状態みたいだね。

そしたらスプレッドシートと連携したいから左にある[データ連携]っていうボタンをクリック。すると案内されるから、それに従ってスプレッドシートと連携すればOK。

連携したらスプレッドシートの中身をちょっといじってみる。写真を変えてみようかな。

画像を変更したいセルを選択して、[挿入→画像→セル内の画像]から変更したい画像をアップロードする。

するとこんな感じで画像の変更ができますね。

画面に戻って更新ボタンを押してみると、ちゃんと反映される。スプレッドシートがデータを持っていてアプリはそれを読み取っているようですね。

文言の変更なんかも簡単で、スプレッドシートから変更したい文言を編集すれば変えられる。

画像の変更と同じように更新ボタンを押してみると、「春の新作」から「PickUp」に文言が変更されるね。

デザインを編集する

デザインを編集したい場合には、カード編集からそれぞれのデザインを編集することができる。記事の本文はこのデザイン、ボタンはこんな感じにしたいなーって思ったら色々いじってみるといいかもしれない。

例えばリストの見出しの編集ならこんな感じ。編集したい部分を選択して、右に出てくる編集ツールから色々変えてみると文字の大きさだったり色を変えることができる。

リストの見出しを編集して青にしてみると、プレビューでは青に変わりました。

だけど、これ大分分かりづらいですね・・・今リストの見出しを編集したけど、リストの見出しってプレビュー画面のどの部分？と思ってしまうので、ここのデザイン編集したいなーって思っても、それがカードのどれを編集したらいいのか分からない。

もうちょい直感的に編集できれば嬉しいけど、なかなかそうもいかないのか。

スマホで表示を確認する

スマホで今作っているものの表示を確認したかったら、右上の[スマホをプレビュー]からみることができる。表示されるQRコードをスマホで読み取ればOK

MagicInstructionsでアプリケーションを作りたいなら

MagicInstructionsでアプリケーションを作ってみたいならヘルプページをざっと見てみるのがいいんじゃないかなーっと思います。分からないところがあったら、何か使い方のヒントが載っているかもしれない。

使ってみた感じ

個人的にちょっと使ってみた感じだけど、ぶっちゃけ使いにくいと思ってしまった・・・もっと触っていけば分かるようになっていて使いやすい気持ちいいいってなるのかもしれないけど、うーーーんって感じだ。こっちは何も用意しなくていいから楽なんだけど、スプレッドシートで配置なんかまで管理するのはしんどいんじゃないだろうか・・・

スプレッドシートはDBとして値を入れるぐらいにしておいて、配置なんかはプレビュー画面から直接いじれたら楽だった。（AppSheetは確かスプレッドシートDBとして取り込んでくれたような）