こんにちは!
てつごろう(@Te256g)です。
プログラミングが不要でWeb開発ができるNoCode(ノーコード)が盛り上がりを見せています。
その中でも特に操作性が高く、人気のあるアプリ開発プラットフォームがAdaloです。
当ブログ「てつごろぐ」では過去にAdaloの概要と始め方、シンプルな写真投稿アプリを作る方法を解説しました。
今回からは「Adaloでできること」と題して、簡単な便利ツールを作る方法を解説していきます。
第1弾は、QRコード生成するツールです。
画像をたくさん使って分かりやすく解説しているので、ぜひ試してみてください!
たくさんの画像を使って手順を解説したんだよ。
筆者について
てつごろう|@Te256g
【Adaloでできること】QRコード生成ツールを作る方法
AdaloでQRコード生成ツールを作る手順を解説していきます。
まず、完成したアプリはこちらをご覧ください。
事前にアプリの新規作成画面を開いた状態で、以下の手順に進んでください。
新規作成の方法がわからない方は「NoCodeツールAdaloでアプリを作る方法【基本操作を習得できます】」の2-1を参考にしてください。
※ここでは「Native Mobile App」を前提に解説します。
ここからの開発の流れはこのようになっています。
(1) QR Code Generatorを追加する
まずはQRコードを生成するための外部コンポーネントを追加する手順です。
Left ToolbarのAdd Panelの下、Marketplaceの「EXPLORE MARKETPLACE」ボタンをクリックします。
Marketplace画面が開きます。
下の方にスクロールすると「QR Code Generator」の項目があるので「INSTALL」をクリックしてください。
※全く同じ名称のコンポーネントがもう一つありますが、ここでは「By Zeroqode」の方を利用します。
「INSTALLED」になったら右下の「DONE」ボタンで画面を閉じましょう。
(2) コンポーネントを追加する
次に、Home画面にコンポーネントを追加する手順です。
ADD COMPONENTから以下の3つのコンポーネントをHome画面に追加してください。
- Text:Simpleの中にあります
- Text Input:Forms and Fieldsの中にあります
- QR Code Generator:Installedの中にあります
要素を追加した後のイメージがこちら。
文字の大きさや太さ、配置などを調整する場合は①コンポーネントをクリックして選択した状態で②「EDIT STYLES」ボタンをクリックし、適宜調整してください。
好みに合わせて調整してみて欲しいんだよ。
(3) QR Code GeneratorにText Inputの内容を渡す
下記の手順でQR Code GeneratorにText Inputの内容を渡す設定をします。
① Home画面に追加したQRコードをクリック
② QR Code Contentの右にある「T」ボタンをクリック
③ Form Inputs→Inputの順にクリック
QR Code Contentの下のエリアに「Input」という赤いラベルが付けばOKです。
これで、入力フォーム(Text Input)の内容がQR Code Generatorに渡されるようになります。
これで作業は完了です!
(4) プレビューで動作確認
最後に、作成したアプリの動作をプレビューで確認しましょう。
Top BarにあるPREVIEWボタンをクリックします。
するとこのようにスマホ画面が表示されるので、メールアドレス、パスワード、名前を入力してSIGNUPボタンをクリックしましょう。
※メールアドレス、パスワード、名前は適当でOKです。
ただしメールアドレスは、正しい形式になっていないとエラーになると思うのでご注意ください。
サインアップが完了すると、Homeの画面が開きます。
入力フォームにURLを入力してみましょう。
実在するWebサイトのURLを入力すると、QRコードが自動的に作られますので、スマホのQRコードリダーなどで読み込んでみてください!
アプリのUI/UXデザイン、データベースの概念を学びたい方は、アプリ開発を学ぶという方法もあり
アプリのUI/UX、プログラムの仕組みやデータベースの操作、概念につまづいてしまう方もいるかもしれません。
NoCode開発の説明をしておきながらなんですが、そういった場合はアプリ開発を学ぶのもいいと思います。
ただ、正直なところプログラミングスクールは高額です。いきなり講座に申し込むのはハードルが高いので、例えばTechAcademyの無料体験などで試してみるのもありですね。
まとめ
今回は「Adaloでできること」と題して、Adaloを使ってQRコード生成ツールの作り方を解説してきました。
開発画面も公式サイトもすべて英語なので難しく感じるかもしれませんが、実際に作っていけば開発の流れがわかると思います。
今後も引き続きAdaloについて記事を作っていきますので、お楽しみに!
NoCodeを本で学ぶ方法
2021年8月26日最新情報!!
動画のオンライン学習サイトで取り扱われるようになっていました!(2021年8月時点)
「世界最大級のオンライン学習プラットフォーム」と呼ばれるUdemyは、動画で学べるのでおすすめ。
BubbleやAdalo、Glide、AppSheet、Webflowなど、当ブログでもご紹介しているNoCodeプラットフォームも動画講座が用意されています。
一部、無料の講座も公開されているので(2021年8月26日時点)、気になる方はとりあえず登録してみては?
もちろん、日本語の講座はたくさん公開されています。
「Glide」「Adalo」「Bubble」を学べる日本語の専門書もあります。
日本語でまとまっている参考サイトや書籍はまだまだ少ないので、このような本を購入して学ぶのが効率的ですね。
NoCodeの基礎から、NoCodeツールの中でも特に人気のある3つのプラットフォームの使い方まで網羅的に学習できます。
コメント