adaloを使って社内アプリケーション開発❶
開発に至るまでの成り行き
社員の資格取得を支援する「チャレンジ制度」があるのですが
申請用紙を用意して項目を記入して提出〜
委員会が集まって許可を出すか話し合い〜
許可が出たら委員会に領収書を提出〜
資格を取ろうとする度にこの工程を踏むのは面倒…
アプリケーションにできないかな?
ということで、未経験で今年入社した私が
ノーコードでアプリケーション開発に挑戦することになりました!
今回はadaloのアカウント作成と各機能についての説明です
次回から実際にアプリケーションを開発した工程をご紹介しますね
1. adaloアカウントの作成
まずはじめにadaloのアカウント作成です!adaloサイトはこちら
adaloサイトの画面右上の SIGN UP ボタンから登録画面へ移動します
![画像1](https://i.imgur.com/kRU0Kgu.png)
登録項目を入力しチェックマークにもチェックを入れ
LET’S DO THIS! ボタンをクリックしたらadaloの登録は完了です!
![画像2](https://i.imgur.com/PP8eEvf.png)
2. 初期設定
画面遷移するとはじめにこんな画面が表示されます。
![画像3](https://i.imgur.com/Avigp39.png)
これはプラットフォームの選択画面です。
adaloではWebのブラウザで閲覧するWebアプリケーションと、
スマートフォンで操作するネイティブアプリを開発することができるのです。
ネイティブアプリについては、iOS、Androidのどちらでも作成できて、
月額課金の有料ユーザーになるとストアへの公開も自動で実行してくれるそう。
![画像4](https://i.imgur.com/Lexg0Ay.png)
今回はNative Mobile Appを選択します。
![画像5](https://i.imgur.com/I8zonsE.png)
NEXTボタンで画面を移動するとテンプレートを選択する画面が表示されます。
Webアプリケーションとネイティブアプリケーションで
それぞれ異なった内容のテンプレートがいくつか用意されているので、
似た内容のアプリケーションを作成する場合にはとっても便利です!
![画像6](https://i.imgur.com/wpzgcFu.png)
今回はいちから制作するのでBlankを選択します。
![画像7](https://i.imgur.com/F3AbXCt.png)
先程と同じようにNEXTボタンで画面遷移するとブランディング画面になります。
![画面8](https://i.imgur.com/aPV8o0q.png)
アプリケーションの名前を入力して、使用されるカラーリングを選択します。
この設定は後で変更できるのでひとまずテキトーに選択しちゃいます。
![画像9](https://i.imgur.com/poSMGCX.png)
3. 各機能の紹介
CREATEボタンをクリックするとこのような画面が表示されます。
![画像10](https://i.imgur.com/Dub5AUZ.png)
3-1. アプリの切替・新規作成
sampleと表示されている部分をクリックするとアプリケーション選択ができます。
またCREATE NEW APPで先程と同じようにプラットフォーム選択から
新規アプリケーションを作成できます。
![画像11](https://i.imgur.com/jA4JXhv.png)
3-2. コンポーネント・スクリーンの追加
次に画面左上の➕マークをクリックするとADD COMPONENT、ADD SCREENと
表示され、それぞれボタンなどのコンポーネント、画面を選択できます。
ここがアプリケーション制作においてメインで使用する部分になります。
コンポーネント選択
![画像12](https://i.imgur.com/kefQs7e.png)
画面選択
![画像13](https://i.imgur.com/cMvW9AC.png)
3-3. カラーリングの変更
パレットのマークをクリックするとBrandingと表示されます。
ここではじめに設定したカラーリングの変更を行えます。
![画像14](https://i.imgur.com/Ti1urTR.png)
3-4. スクリーンの詳細
画面が重なったマークをクリックするとScreensと表示されます。
ここでは現在表示されている画面の確認ができます。
![画像15](https://i.imgur.com/Sh5oa7O.png)
試しにHomeをクリックするとその画面で現在使われている
コンポーネントアクションについて表示されます。
(アクションの設定については後で説明します。)
![画像16](https://i.imgur.com/NLzTyuR.png)
3-5. データベースの追加
次にページがきらきらしているマークをクリックするとDatabase Collectionsと表示されます。
ここでadaloアプリケーション内のデーターベースを構築できます。
![画像17](https://i.imgur.com/9GdUYqZ.png)
Usersというコレクションは初期設定されており、その中の4つのプロパティは削除できません。
また型の変更もできませんが、名前の変更のみできるようになっています。
(新規作成したプロパティも同様、作成後の型変更はできません。)
➕ ADD PROPERTYでプロパティを追加できます。
![画像18](https://i.imgur.com/SdKNIuQ.png)
使用できる型は以下の通りです。
![画像19](https://i.imgur.com/sPxPU0q.png)
レコードはこのように表示されます。
![画像20](https://i.imgur.com/hDFVxgh.png)
➕ ADD USERをクリックするとデーターベースに直接レコードを増やすことができます。
![画像21](https://i.imgur.com/ZYgwzZE.png)
Userコレクション閉じ、Database Collectionsの
➕ADD COLLECTIONをクリックすると新しいコレクションを作成できます。
コレクション名を入力しADDボタンをクリックします。
![画像22](https://i.imgur.com/asyy3fL.png)
新しくRequestというコレクションが作成されました。
➕ ADD PROPERTYをクリックすると先程と同様に型が表示されます。
一番下のRelationshipを選択すると現在作成されているコレクションが選択できます。
![画像23](https://i.imgur.com/Gpk5z1i.png)
試しにUsersをクリックするとこのような画面が表示されます。
コレクション同士の関係性をここで選択できます。
![画像24](https://i.imgur.com/0EEdxD0.png)
3-6. アプリケーションの設定
歯車マークをクリックするとSettingsと表示されます。
![画像25](https://i.imgur.com/62gGNg3.png)
ここではアプリケーションの名前や説明の設定、削除やコピーができます。
![画像26](https://i.imgur.com/VXSa7QZ.png)
3-7. アプリケーションの公開
チェックマークが重なったマークをクリックするとPublishと表示されます。
ここでは制作したアプリケーションをAndroid、iOS、PWAのいずれかで公開することができます。
![画像27](https://i.imgur.com/B3OAL33.png)
3-8. アプリケーションの分析
1番下のグラフのマークをクリックするとAnalyticsと表示されます。
ここでは現在選択しているアプリケーションを訪れた人数や
使用された回数などが画面や地域ごとに詳細に分析されます。
![画像28](https://i.imgur.com/UzSbPZz.png)
3-9. アプリケーションのプレビュー
画面右上の▶︎PREVIEWをクリックすると、現在作成しているアプリケーションをプレビューで見て操作することができます。
![画像29](https://i.imgur.com/c4AGKVD.png)
3-10. アプリケーションのシェア
▶︎PREVIEWの隣のSHAREをクリックすると現在作成しているアプリケーションを
QRコードを読み込んでもらうことでシェアできます。
![画像30](https://i.imgur.com/9tbTrGK.png)
3-11. その他
右下のadaloマークをクリックするとチュートリアルやヘルプを見ることができます。
ヘルプセンター
![画像31](https://i.imgur.com/tlxlRSP.png)
チュートリアル
![画像32](https://i.imgur.com/eFduDN6.png)
ざっくりと紹介しましたがどうでしょうか、
私が初めて触れた時は、シンプルでわかりやすいなという感想でした。
次回は実際に開発する様子と一緒に細かい部分まで説明していきます!
参考動画URL
ノーコードでスマホのネイティブアプリも作れる – Adaloの使い方#1
NoCodeツール「Adalo」でチャットアプリをつくろう!#1