ノンプログラミング開発ツール ドリーム・アーツ

ノーコードサービスの可能性と限界--アプリを作成してツールの違いをみる

注目が集まるノーコードサービスだが、実際にはアプリをどのように作れるのだろうか。「bubble.io」「SmartDB」で企業内での育児休暇を申請するアプリを作成して、それぞれの特色を紹介する。

 前回は、ノーコードサービスの概要、主な分類などを紹介した。第2回となる今回は、実際にノーコードサービスで簡単なアプリケーションを作成してみることで、ノーコードサービスがどの程度使えるのか試していく。

 サンプルとして、ノーコード界隈で世界的に知名度が高い 「bubble.io(バブル)」と、国内の大企業で多くの採用実績がある「SmartDB(スマートデービー)」で、社内での育休申請を題材として、実際にアプリを作成してみることで、それぞれの特色を紹介していく。

ウェブ/スマホアプリ型のbubble.io--あらゆるアプリをノーコードで

 bubble.ioは、さまざまなウェブアプリをノーコードで生成できる「ウェブ/スマホアプリ型」に分類されるツールだ。

 ウェブブラウザ上でデータベースの定義と、ユーザーインターフェース(UI)フォームの定義を行うことで、それをアプリケーションとして公開することができる。

 通常、コーディングによってアプリを作成するときには、データを格納するモデルの層と、UIを提供するビューの層を分離して設計するMVC(Model-View-Controller)や MVVM(Model-View-ViewModel)という設計パターンを採用する。

 bubble.ioの基本的な動作は、UIに入力フォームやボタンを配置して、ボタンが押されたというイベントを受けて、データベースに格納するレコードに入力フォームの値をセットして、データを更新する。データが更新されるとそのイベントを受けてUIに配置したリストやグラフなどの表示が更新されるという、MVVMパターンによる設計をベースにしている。

 UIを作りながら自動的にデータベースを作成していくことも可能だが、作業が煩雑になるので、まずはきちんとデータベースの定義を作成してからUIの設計に取りかかるという順番をおすすめしたい。

 データベースの定義は、リレーショナルデータベース(RDB)の表が「Data type」となり、表に定義する列が「Fields」となる。フィールドのタイプとして、テキストや数字だけでなく、日付、ブール値、ファイル、画像、地理的位置情報などを格納することができる。

 例えば、今回作成する育休申請業務の場合は、以下の図1のような定義になるだろう。

図1 図1
※クリックすると拡大画像が見られます

 データの定義ができたら、これを表示、編集するUIを作成していく。

 さまざまなUIウィジットが提供されているので、これを画面上にドラッグ&ドロップで配置していけばよい。スマホやタブレットの場合に配置を縦に並べるレスポンシブレイアウトにも対応しているので、図2のようにきちんとデザインされたフォームを作成することができる。

図2 図2
※クリックすると拡大画像が見られます

「ノンプログラミング開発ツール」で読まれている記事

TechRepublic Japanで人気の記事

編集部オススメ

トレンドまるわかり![PR]

財務・経理
人事・労務
マーケ・営業
購買・調達
生産・製造
データ分析
コミュニケーション
通信・通話
文書・コンテンツ
PC・モバイル
新興技術
ITインフラ
クラウドサービス
OS・ミドルウェア
開発
開発ツール
開発支援
ノンプログラミング開発ツール
データベース
運用
セキュリティ

ホワイトペーパーランキング

  1. 5分でわかる、レポート作成の心得!成果至上主義のせっかちな上司も納得のレポートとは
  2. ノートPCは従来ながらの選び方ではダメ!新しい働き方にも対応する失敗しない選び方を徹底解説
  3. 問題だらけの現場指導を効率化!「人によって教え方が違う」を解消するためのマニュアル整備
  4. 緊急事態宣言解除後の利用率は低下 調査結果に見る「テレワーク」定着を阻む課題とその対応策
  5. たしか、あのデータは、こっちのアプリにあったはず…--業務改善のためのアプリ導入がストレスの原因に?

Follow TechRepublic Japan

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]