[UI Bakery] NoCodeでAngularのUIをプロトタイピング(コード出力も可能なツール)

モダンなWebアプリの画面をコードを書かずに開発して、ソースコードとして出力するツールについて解説します。
特徴はソース自体を出力できるため、通常の開発と遜色ない柔軟性を保ったまま時短を図れることです。
他のNoCodeツールと比べて、後から出力したソースに機能を追加していく前提なのでエンジニア向き。

UIBakery概要

UI Bakeryとは

  • UI Bakery

    • NoCode(Low-Code)プロトタイピングツール
      • WebアプリのUI(画面)をコードを書かずに開発することができるWebサービス
    • Angularベースでソースコードを出力可能
      • 最重要ポイント
      • 柔軟性に優れている
        • 他のNoCodeツールのデメリットは、”そのツールでカバーする範囲はできない”ことにある
          • 他のサービスとの連携や高度な機能を足そうとすると、結局作り直しになる
      • どのプラットフォームにも展開可能
        • 他のツールの場合、”ツール内の機能でしか”Webに公開できない。大抵そこで料金がかかる
          • アクセス数に応じて更に料金が加算される仕組みが多く、作れてもビジネスとして微妙
          • マネタイズの手法としては賢いと思うがあまり使いたくない
        • 例えば、Github PagesやAWSのS3、Firebase HostingなどのPFを要件に応じて選定できる
          • つまりインフラの知見を持つエンジニアであれば、費用を最適化してサービスを展開することができる
    • 基本無料
      • 大抵のNoCodeツールで目につく欠点がないように思える
  • テンプレートが豊富で、使える物があればかなり楽に実装できます
    UI bakery Template

ユースケース

要件定義や開発の初期段階で実際に操作可能な画面を作ることで、認識のギャップを低減することが出来ます。後の改修リスクを極力減らし、早めに機能面の実装に入ることができます。
こういった実働するモデル(プロトタイプ)を早期に製作する手法およびその過程をプロトタイピングと言います。

  • UI Bakeryを利用したAP開発の流れ
    • UI BakeryでUIを一日でプロトタイピング
    • 顧客やプロジェクトオーナーに対してデモを実施
      • 指摘や要望があれば修正を加える
      • ここでニーズと実装のギャップを防ぐ
    • UI BakeryよりAngularのソースコードを出力
    • gitなどに加える
    • 出力したソースに機能を加えていく

使用方法

アカウントを作成~ログイン

  • UI Bakery Login

    • 今回はGoogleアカウントでログインしてみます

      UI_Bakery_login

  • Confirm
    UI Bakery Registration

  • 質問に回答してSubmit
    UI Bakery question

  • チュートリアル画面に飛びます

    • Stay Your Journeyから続けると基本的な操作方法が分かります

UI Bakery Tutorial

使用方法/機能解説

基本的にWEBブラウザ上でログインして操作します

1. Working Area

  • 作成中のAPの画面を確認できるスペース

UI Bakery Working Area

2. Component Picker

  • +ボタンを押すと、コンポーネント(簡単に言うとAngularにおける画面の構成要素の単位)
  • 使用方法
    • Working Area内の任意のスペースをクリック
    • 中に出てくるグレーの+をクリック
    • 追加したいコンポーネントの種類を選択
      • Menuや認証画面、表、Chartなどのよく使う物が用意されています
      • めちゃくちゃ便利…
    • コンポーネントが追加される

UI Bakery Components

UI Bakery Widgets

3. Configuration Panel

  • 右に表示されるパネルから、コンポーネントの設定を行うことが出来ます
    UI Bakery Configuration Panel

4. Toolbar

上のバーでプレビューやソースコードの出力が可能です

  • 真ん中のアイコン
    • PCやモバイルなどでどのように表示されるかPreviewを確認できます
  • Undo/Redo
    • 戻る/進む
  • GET CODE
    • ここからAngularのソースコードを出力可能
    • UI Bakeryで素早く作ったUIを出力したコードに、自分で機能(TypeScript)を書いていく流れが良さそうです
  • beta
    • まだベータ版だが、API連携もできるらしい
    • 現時点ではUI開発のみの用途がメインだが、機能面も面倒なところを肩代わりしてくれるようになるかも
      • 細かいところは自分でいじれるままであれば嬉しい

UI Bakery Toolbar

5. Page Management

  • ページやレイアウトの設定を行うパネル
  • サイドバーやナビゲーションバーもここで設定
  • 使用方法
    • 右上のアイコンをクリック
    • ページの追加やレイアウト変更を実施

UI Bakery Page Management

6. Tool Sidebar

左のナビ。UI Bakeryのツールを実行できる

  • Painter
    • 流行りのダークテーマなどにパパッと変更できます
  • Video
    • アプリの紹介動画やデモに使えそう
  • Documentation
    • UI Bakeryの公式ドキュメントをみれます

UI Bakery Tool Sidebar

学習方法

会員登録をしたら、まずはチュートリアルをやると理解が深まると思います。
他のNoCodeと比較して圧倒的に分かり易く、特にハマる場面もありませんでした。
動画と説明文がセットになっている親切設計。

UI Bakery Tutorial Sample

Projectの作成

Tutorialが終わったらCreate ProjectからUIを自由にプロトタイピングしてみましょう。
Angularではアプリの単位をProjectと呼びます。

  • Create Projectを押下
  • PJの名称を入力してCREATE

UI Bakery Create Project

テンプレートの選択

テンプレートを使用することでデザインの手間を大幅に短縮できます。よくあるパターンは用意されているので、テンプレートをもとにアレンジを加えるくらいですむことも多いと思います。
不慣れなメンバーが多いチームではこのレベルの画面を作るだけで、2,3週はかかりそう。

UI bakery Template

UI Bakery Template 2

  • Previewから実際の画面を操作することも可能です
    UI Bakery Template Preview

  • Templateを実際に利用するとこんな感じ
    UI Bakery Making

操作が直感的なので、実際に試しながら理解を深めていける良いツールでした。
私も引き続き試して、ハマるポイントがあれば追加で記事書こうと思います。API連携の機能も試してみたい。

参考

@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×