【Adaloでできること】QRコード生成ツールの作り方を解説

AdaloでQRコード生成ツールの作り方を解説NoCode

こんにちは!
てつごろう(@Te256g)です。

プログラミングが不要でWeb開発ができるNoCode(ノーコード)が盛り上がりを見せています。

その中でも特に操作性が高く、人気のあるアプリ開発プラットフォームがAdaloです。

当ブログ「てつごろぐ」では過去にAdaloの概要と始め方シンプルな写真投稿アプリを作る方法を解説しました。

今回からは「Adaloでできること」と題して、簡単な便利ツールを作る方法を解説していきます。

第1弾は、QRコード生成するツールです。

画像をたくさん使って分かりやすく解説しているので、ぜひ試してみてください!

てつごろう
てつごろう

たくさんの画像を使って手順を解説したんだよ。


 筆者について

大学時代に情報システム系学科でC、Java、VC++を学ぶ。IT企業ではハードウェアエンジニアとしてWindows/UNIX系システムの保守・運用を担当。現在は個人でWebサイト制作を請け負っています。NoCodeの可能性に惹かれ、Webサービス開発に向けて勉強中。

てつごろう|@Te256g


スポンサーリンク

【Adaloでできること】QRコード生成ツールを作る方法

AdaloでQRコード生成ツールを作る手順を解説していきます。

まず、完成したアプリはこちらをご覧ください。

事前にアプリの新規作成画面を開いた状態で、以下の手順に進んでください。

新規作成の方法がわからない方は「NoCodeツールAdaloでアプリを作る方法【基本操作を習得できます】」の2-1を参考にしてください。

※ここでは「Native Mobile App」を前提に解説します。

ここからの開発の流れはこのようになっています。

QRコード生成ツール開発の流れ

(1) QR Code Generatorを追加する
(2) コンポーネントを追加する
(3) QR Code GeneratorにText Inputの内容を渡す
(4) プレビューで動作確認

(1) QR Code Generatorを追加する

まずはQRコードを生成するための外部コンポーネントを追加する手順です。

Left ToolbarのAdd Panelの下、Marketplaceの「EXPLORE MARKETPLACE」ボタンをクリックします。

Market Place
Market Place

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の中にあります
日本語の直接入力の不具合について

TextやText Inputで文字を変更する時、直接日本語を入力すると文字がおかしくなる不具合があるようです。テキストエディタなど別のツールで書いてから、貼り付けましょう。

要素を追加した後のイメージがこちら。

コンポーネント追加後の状態
コンポーネント追加後の状態

文字の大きさや太さ、配置などを調整する場合は①コンポーネントをクリックして選択した状態で②「EDIT STYLES」ボタンをクリックし、適宜調整してください。

てつごろう
てつごろう

好みに合わせて調整してみて欲しいんだよ。

(3) QR Code GeneratorにText Inputの内容を渡す

下記の手順でQR Code GeneratorにText Inputの内容を渡す設定をします。

① Home画面に追加したQRコードをクリック

② QR Code Contentの右にある「T」ボタンをクリック

③ Form Inputs→Inputの順にクリック

QRコードにInputの内容を渡す
QRコードにInputの内容を渡す

QR Code Contentの下のエリアに「Input」という赤いラベルが付けばOKです。

これで、入力フォーム(Text Input)の内容がQR Code Generatorに渡されるようになります。

QR Code ContentにText Inputの内容が渡される
QR Code ContentにText Inputの内容が渡される

これで作業は完了です!

スポンサーリンク

(4) プレビューで動作確認

最後に、作成したアプリの動作をプレビューで確認しましょう。

Top BarにあるPREVIEWボタンをクリックします。

プレビュー
プレビュー

するとこのようにスマホ画面が表示されるので、メールアドレス、パスワード、名前を入力してSIGNUPボタンをクリックしましょう。

※メールアドレス、パスワード、名前は適当でOKです。
ただしメールアドレスは、正しい形式になっていないとエラーになると思うのでご注意ください。

サインアップ
サインアップ

サインアップが完了すると、Homeの画面が開きます。

入力フォームにURLを入力してみましょう。

実在するWebサイトのURLを入力すると、QRコードが自動的に作られますので、スマホのQRコードリダーなどで読み込んでみてください!

URLを入力するとQRコードが生成される
URLを入力するとQRコードが生成される

まとめ

今回は「Adaloでできること」と題して、Adaloを使ってQRコード生成ツールの作り方を解説してきました。

開発画面も公式サイトもすべて英語なので難しく感じるかもしれませんが、実際に作っていけば開発の流れがわかると思います。

今後も引き続きAdaloについて記事を作っていきますので、お楽しみに!

アプリ開発に必須のUI/UXデザインを学ぶ
アプリ開発には、ユーザビリティへの理解が重要です。iPhone・Androidアプリのデザインを学ぶなら、自宅で学べるオンラインスクール【TechAcademy】 UI/UXデザインコースがおすすめ。実務に近い環境で、学びながら手を動かして制作。社会に通用するスキルを習得できます。
NoCode
てつごろうをフォローする
てつごろぐ

コメント

タイトルとURLをコピーしました