Mendixプログラミングコンテスト2024入賞
2024年6月19日に第3回目となるMendixプログラミングコンテストが開催されました。
第1回からコンテストに参加している弊社ビルドシステムは、今年もコンテストに出場し、見事入賞する事ができました！
本記事では、コンテストで入賞したアプリについて詳しく解説していきます。
Mendixでは、どのようなアプリをどういった工程で作ることができるのか？そして、次回のコンテストに参加するかなど考えられている方の知りたい情報がまとまっておりますので、是非最後まで読んで頂ければと思います！
Menixプログラミングコンテストとは？
Mendixプログラミングコンテストは、ローコードツールMendixの提供を行うシーメンス社が主催するイベントMendix Japan Day内で行われるコンテストです。
コンテストに提出するアプリはMendix Studio Proを使用し作成する事が必須となります。
企業、個人、そしてMendix習得レベル関係なくコンテストに出場する事が可能です。
作成するアプリもMendix Studio Proを使用していればOKの為、ご自身があると便利だなと思うアプリ等、お好きに作成して頂けます！
審査の基準では、使いやすさや、完成度、独創性や実務への有用性などがみられます。
現時点で、年に1度開催されておりますので、是非次回のコンテストに出場してみて下さい。
コンテスト開催が決まりますと、こちらの弊社コラムにて告知いたしますのでお見逃しなく！
コンテスト入賞アプリについて
今回でコンテスト出場3度目となる弊社。第1回目はドローンを動かすアプリ。そして第2回目はAIを使用したアプリを作成いたしました。
第3回目となる今回は、デザインに注力したアプリを作成いたしました。
どんなアプリ？
今回作成したデザインに注力したアプリ、その名もUIチャレンジアプリです。
アプリの機能としては、チャットのお問い合わせアプリで、以下の内容です。
- お問い合わせ一覧（ユーザー側・サポート側）
- お問い合わせ新規作成、編集、削除
- チャットでのお問い合わせ
- 画面のライトモード・ダークモード切替
このアプリは、アプリの機能そのものより、デザイン面に力を入れているので、上記のライトモード・ダークモード切替がカギとなっております！
ダークモードとライトモードで色が変わるだけでなく、デザインも変更されるよう工夫されております。ライトモードはポップ、ダークモードではシャープなデザインと、アプリ利用ユーザーの好みに合わせてデザインを切り替えることが可能です。
アプリ作成理由
今回デザインに注力したアプリを作成した理由は、ローコードのプラットフォームであるMendixを使用しながらも、作成されたアプリがローコードで作られたことが分からないような、デザインがリッチで魅力的なUIのアプリを実現したかった為です。
アプリのターゲット
アプリのターゲットは、アプリの機能であるお問い合わせ機能を使用するエンドユーザーではなく、迅速にアプリ構築が可能なローコードの良い面を活かしつつ、ローコードっぽくない画面を構築したい開発者及びデザイナーとなっております。
アプリを通して課題解決
Mendixのみならず、ローコードツールには以下のような課題点があります。
迅速に画面構築が出来る反面、ローコードで作成されていない他のWebアプリ画面との差が出来てしまう
ドラッグアンドドロップでボタン等、部品を配置するだけで画面構築が出来る為、とても早く画面を作成することが可能です。しかし、デザイン面に何も手を加えないと、よく言えばシンプル、悪く言えば個性がない。そのようなデザインの画面に仕上がってしまいます。
上記のような悩み・課題を抱える開発者、デザイナーの方に、今回のUIチャレンジアプリを通して、短期間で他のWebアプリケーション画面に負けないぐらいリッチなデザインのWebアプリ画面の作成がMendixでも可能だという事がお伝え出来るかと思います。
アプリ作成のチーム編成
UIチャレンジアプリ作成チームは以下の編成となっております。
- プロジェクトマネージャー ：
- プロジェクトの企画、進行
- Mendixアプリ実装者
- Mendixでデザイン以外の箇所（ロジックや画面構成など）の実装
- デザイナー
- アプリのデザインを作成
- Mendixデザイン実装者
- Mendixアプリ実装者が作成したアプリに対して、デザイナーが作成したデザインをMendixで実装
今回はデザインに力を入れた為、デザイナーが参画しております。
アプリ作成手順
UIチャレンジアプリをどのような手順で作成したかを詳しくご紹介いたします。
下記の流れでアプリを作成いたしました。
- Mendixでプロトタイプアプリを作成（担当：Mendixアプリ実装者）
- デザインプロトタイプを作成（担当：デザイナー）
- デザインの実装（担当：Mendixデザイン実装者）
- アプリ完成
手順1：Mendixでプロトタイプアプリを作成
手順1では、要件を元にMendixでプロトタイプアプリを作成いたしました。プロトタイプアプリの作成は、Mendixアプリ実装者が行いました。
プロトタイプの段階ではデザインには一切手をつけておらず、デザイナーが作成した最終的なデザインは反映されておりません。各ボタンの配置や、お問い合わせ一覧の表示、チャット機能、その他にライトモード・ダークモード切替時のロジック等が実装されております。
プロトタイプアプリはこのようになっております。
手順2：デザインプロトタイプを作成
手順2では、手順1で作成したプロトタイプアプリをもとに、デザインプロトタイプツールを用いてアプリのデザインプロトタイプを作成いたしました。
デザインプロトタイプツールとは、アプリなどへデザインを実際に実装する前に、UI・UXが確認できるツールです。このようなツールを使用する事で、デザイナーとアプリ企画者間の認識をしっかりと合わせることができ、後々実装してから「思っていたのとは違う！」などの問題が起きる事を防ぐことが出来ます。
企画者側がデザインプロトタイプを確認し、デザイナーが修正箇所をデザインプロトタイプに反映するという流れを繰り返し、デザインを固めていきました。
今回のデザインプロトタイプ作成ではFigmaというツールを使用いたしました。
こちらがFigmaの画面で、デザイナーが作成したデザインプロトタイプです。
また、デザインプロトタイプに対応するデザインのCSSも自動で生成されます。
手順3：デザインの実装
手順3では、手順1のMendixで作成したプロトタイプに、手順2で作成したデザインを実装していきます。
デザイン実装時には、ブラウザの機能であるデベロッパーツールを使用し、デザインを適応させたいパーツのクラス名を探し、そのクラス名を使用してmain.scssの書き換えを行いました。
main.scssをMendixで直接開いて実装する事も可能ですが、今回はデザイナーが普段使用しているテキストエディタであるVS Codeを使用し実装を行いました。
Mendixではこのように普段から慣れ親しんでいる他ツールも使用できたりと、作業効率を落とすことなく実装できます。
VS Codeでmain.scssを開くには、Mendix Studio Proでmain.scssを右クリック→show file in exploreの手順で開くとスムーズです。
手順4：アプリ完成
デザインの実装でトライアンドエラーを何度も繰り返し、ついにアプリの完成です！！
全てのデザインが実装されたmain.scssがこちらです。
今回は650行近くのコードが書かれています。
デザイン実装のBefore/Afterを比較するとこのようになります。
デザイン実装前のシンプルな画面から、ローコードツールで作成したと分からないようなリッチなデザインになりました！！
デザイン面でこだわった点
今回のアプリのデザイン面でこだわった点をご紹介いたします。
こだわった点 その1
Mendixのシンプルでフラットなイメージとは逆で、立体的かつクールなデザインにしました。
そのためMendixで構築されたと感じさせないデザインになっています。
このようなデザインにすることで「Mendixでもこんなデザインが構築できる！」ということを伝えられたかと思います。
こだわった点 その2
ライトモードとダークモードの2パターンのデザインを作成し、スイッチでデザインを切り替えられるようにしました。
ギャップのある2パターンのデザインを展開することで、Mendixでも様々なデザインにすることができるという印象を与えられるようにしました。
ライトモード：大衆向けのポップでシンプルなデザイン
ダークモード：開発者向けのシャープでクールなデザイン
こだわった点 その3
チャット画面で、左右から吹き出しが出ているようにし、実際に会話をしている雰囲気を出しました。
デザイン実装時苦労した点
今回のアプリ作成で、デザイン実装時苦労した点をご紹介いたします。
苦労した点 その1
Mendixではすでにデフォルトのクラス名やCSSが当てられているため、そのCSSに対して上書きし反映をさせ実装を行ったのですが、思ったとおりにCSSが効かないときがありました。
今回は以下の方法で上記問題を対応いたしました。
- 「!important」でCSSの優先順位をあげ無理やり効かせる
- CSSを当てるクラス名に間違いがないか確認する。理由としては、デフォルトで各パーツに複数クラス名があり、どのクラス名に対してデフォルトのCSSが当てられているか確認しそのクラス名に対してCSSを上書きする必要があるため
苦労した点 その2
同類のパーツに同じクラス名が存在するケースがあり、同類パーツの中の特定の一つだけにCSSを効かせたつもりが別の箇所にもCSSが反映されており、以下のようなパターンがありました。
テキストボックスとプルダウンメニューに同じ「mx-grid-search-input」のクラス名が存在しており、テキストボックス側にだけインナーシャドウを反映させたと思ったらプルダウンメニューにもインナーシャドウが反映されてしまった。結果的にはそれぞれに特定のクラス名も存在していたため、そのクラス名を利用してそれぞれにCSSを当てることができました。
特定のクラス名：
テキストボックス「mx-name-searchField22」
プルダウンメニュー「mx-name-searchField24」
共通のクラス名「mx-grid-search-input」
※「mx-grid-search-input」が共通のクラスのため、このクラスにCSSを当てるとテキストボックス、プルダウンメニュー両方に反映されてしまう
苦労した点 その3
同類パーツでそれぞれに特定のクラス名がなく、同類パーツの一つだけにCSSを当てたい場合には下記例のように、CSSを当てたい特定のパーツにクラス名を当てる必要がありました。
例）カラムのパーツにはクラス名に「col-lg」「 col-md 」「col」・・などカラム特有のクラスが共通して存在しており、そのクラスに対してCSSを当てると他のカラムにも反映されてしまう。そのため特定のカラムにCSSを当てたい場合には新しくクラス名を当てる必要がある。
▼特定のカラムにだけCSSを当てるために「message-wrap」のクラス名を追加した例
※このカラムのpaddingのみ0にしたかったため「message-wrap」のクラス名を当てた
下記手順で新しくクラス名を当てました。
- HOME_Webファイル開く
- Struture modeにする（Design modeより細かな粒度で選択＆設定できる）
- クラス名を当てたい箇所を選択する
- クラス名を当てる
デザイン実装時注意した点
デザイン実装時注意した点をご紹介いたします。
注意した点 その1
mine.scssでどのパーツどのCSSを当てているか分からなくならないようにメモをしながら実装をしました。
注意した点 その2
下記理由のため、複数のパーツに対して一気にCSSをあててから反映されているか確認するのではなく、一つのパーツごとにCSSが上手く反映されているか確認しながら実装を行いました。
- CSSを上書きする形で当てるため思い通りに効かない場合もある
- 同類パーツに同じクラス名が存在する場合もあるので、意図しない箇所にもCSSが反映されていたら当てるクラス名も変更する必要がある
まとめ
Mendixでも柔軟にデザインを変更することができ、ローコードツールで作られていない他のWebアプリケーション画面に負けないぐらいリッチなデザインのWebアプリ画面の作成が可能だという事がお伝えできましたでしょうか。私たち自身も今回のアプリ作成を通して、Mendixの良さと、可能性を改めて実感することができました。
ぜひ、次回のコンテストに参加してみて下さい！
