2018.11.27Tips

Atlasでカッコ良くて使えるアプリケーションを作る方法

  • このエントリーをはてなブックマークに追加

Arjan Hendriksen
2017年8月10日

 

Mendixのアプリ構築の哲学として、私たちは常にIT側とビジネス側の緊密な連携、迅速なフィードバックと反復を奨励してきました。
このフィードバックの考え方をチーム間を横断させて適用することにより、低コストでアイデアを検証し、うまくいかないアイデアを取り除き、繰り返しアイデアを改善することができるようになります。

重要なフィードバックを得るための鍵は、最初からその為のプロダクトを利用するということです。
プロダクトを利用することにより、最初の段階からいくつかの画面を見ただけでアイデアを検証することができます。
モバイル、タブレット、またはデスクトップデバイス上にある実際のアプリから、ビジネスロジックを構築し、よりよいインテグレーションなどを提案できます。

Web Modelerを含むMendix Atlasリリースでは、次のような新しい製品のポートフォリオを提案します。
Web Modelerは、あなたの新しいアイデアや革新的なアイデアに基づいた、迅速なアプリケーション開発フローに重点を置いています。
ビジネスユーザーと開発者は、共通の設計プラットフォームを活用して構築される魅力的なマルチチャネルユーザーインターフェイスを、すばやく簡単に作成し、しかも何度も修正することができます。

これからMendix Atlas FrameworkとMendix Web Modelerを使って、あなたが持っているアイデアに基づいてアプリを構築する方法を説明します。

 

Mendix Web Modelerとは何ですか?

Mendix Web Modelerは、使いやすいクラウドベースのLow-Codeアプリモデリングツールです。
Web Modelerは、WYSIWYG(見たままを得られる)アプリケーション開発に完全にフォーカスしています。
インストールは不要で、普段ご利用になっているブラウザベースで利用できます。

Web Modelerでは、Webページを視覚的に構築し、その結果をすぐに確認することができるので非常に簡単で直感的です。

 

誰のためにあるのですか?

Mendix Web Modelerは、イノベーション、顧客との関わり、そして業務効率の向上という大きなテーマを持っているチームを対象としています。

まずは新しいプロジェクトをスタートし、Mendix Web Modelerでアプリケーションのページレイアウトと業務ロジックを作成し、背景のデザインとロゴを調整したら公開してみてください。
すぐにスマホやブラウザのMendix Appで動かすことができます。これは静的なプロトタイプだけでなく、実際のライブアプリです。
将来(非常にうまくいけば)うまくスタートが切れたアプリケーションの最初のイテレーションになるかもしれません。

 

Web Modelerのハイライト

1.新しいアプリを作成する

MendixポータルのAtlas UIスターターアプリを使用して、Web Modelerでプロジェクトを開始することができます。
右上隅の[Create App]ボタンをクリックし、[Blank app]を選択します。
このアプリは、新しいAtlasのテーマとボックスのスタイリングを含んでいます。

新しいアプリケーションプロジェクトが作成されたら、Team Buzzに遷移します。

右隅にある「Edit App」ボタンをクリックして、Mendix Web Modelerで直接アプリケーションを開きます。

 

2.美しく使いやすいビルディングブロックとページテンプレートを使用してページを構築する

ページを作成することは決して容易ではありません。
Web Modelerには完全に統合されたAtlasビルディングブロックがあり、すべてのページに簡単に追加することができます。
すべてのスタイルは事前に設定されており、自分のニーズに容易に適応できます。

これをどのように使用できるかを詳しく見ていきましょう。
空のアプリケーションを作成してWeb Modelerで開くと、デフォルトのホームページがあります。
右側のツールボックスからヘッダービルディングブロックの1つを使用してヘッダーを簡単に変更することができます。

ビルディングブロックは、1つまたは複数のウィジェットで構成され、変更や調整することができます。

すべてのウィジェットには、ウィジェットの外観を視覚的に変更するために使用できる一連のデザインプロパティが定義されています。
すべての設定は、コードや技術的なCSSスタイリングを書くことなく、ウィジェットのプロパティバーで行われます。

たとえば、プロパティバーのそれぞれのデザインプロパティを使用して、新しく追加されたビルディングブロックのヘッダタイトルを変更し、警告(オレンジ)と太さを太字に変更することができます。
結果はすぐにページエディタに表示されます。

 

3.コーポレートカラーでアプリをスタイリングする

自分のコーポレートカラーとロゴを使用してアプリケーションを構築することがWeb Modelerで簡単にできます。
左側のメニューバーにあるBrushアイコンを使用してTheme Customizerを開き、会社のロゴをアップロードしてください。

テーマカスタマイザは、ロゴの主なブランドカラーを決定し、すべてのテーマオプションのカラーピッカーでこれらのカラーを使用することができます。
[Apply]をクリックすると、アプリ全体がコーポレートカラーと会社のロゴで表示されます。

 

4.アプリを公開する

最初のページを作成したので、スマホで実際の結果を確認しましょう。

あなたが構築したアプリは、ライブアプリの環境に数秒で公開できます。
Publishダイアログを開き、[View on mobile device]を選択し、表示されたQRコードをMendix Appでスキャンして、スマホに直接ライブアプリを表示します。

これは、他のユーザーと作成途中の結果をテストする場合や、スマホで自分でテストする場合に最適です。
低コストの検証とフィードバックが可能です。
この結果は静的なプロトタイプではなく、実際のアプリケーションであり、すぐに拡張することができます。

 

5.ページテンプレートを使用してアプリフローを作成する

Mendix Atlasリリースの一環として、新しいページを作成するために使用できるすぐに使えるページテンプレートの大量のコレクションをリリースしました。
ページテンプレートは、その上にアトラスビルディングブロックとウィジェットがセットされた、あらかじめ作成されたページです。
アクションタイルのあるダッシュボードページ、またはタイムラインページが必要ですか?
私たちはそれらを持っていいます。
概要リストから始めたいですか?
それも既にあります。
応答性の高いすべてのAtlasテンプレートは、Mendix Web Modelerに同梱されており、atlas.mendix.comで解説されています。

今度は、プログラムリストをホームページの「Program 」ボタンに接続します。
Program ボタンを選択し、OnClickプロパティのPageオプションを選択します。
ページ選択ダイアログには、新しいページを直接作成したり、このページを選択として使用する便利なオプションがあります。
Program リストをタイムラインとして表示したいので、この新しいページにタイムラインページテンプレートを使用しました。

ページスケルトンの準備が整い、完全にスタイリングされています。
この後、必要な詳細とデータをページ要素に添付して、ライブアプリに再度公開することができます。

 

6.ツールボックスに素晴らしく新しいビジュアルApp Storeウィジェット

アプリケーションを構築し続けるために、我々はWeb Modeler専用に調整された10のすばらしい新しいApp Storeウィジェットのセットを作りました。
これらのウィジェットはすべてWeb Modelerに完全に統合されており、Building Block内のToolboxで直接利用でき、個々のウィジェットとして利用できます。

ウィジェットのダウンロードと使用は簡単です。
ウィジェットタイルの[Download from Cloud]アイコンをクリックするだけで、ページへのドラッグアンドドロップが可能です。

たとえば、Google Mapsウィジェットは以下のようになります:

 

次のステップ

上記で学んだことで、Web Modeler、Atlas UI、およびMendix Appを使用して独自のカスタムフロントエンドを構築し、ビジネスチームメンバーと繰り返して、美しく使いやすいアプリケーションを作成することができます。

 

アプリケーションを構築するためのリソース

  1. Mendix Web Modelerでアプリを構築する方法
  2. Mendix Web ModelerとDesktop Modelerの間でアプリケーションを同期する方法

 

翻訳元:

How to Begin Creating Great-Looking, Highly Usable Apps with Atlas

  • このエントリーをはてなブックマークに追加

このエントリーにコメントする

必須項目は全て入力してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)