LoginSignup
1
1

More than 1 year has passed since last update.

Power Apps で Fluent UI を使う方法(解せぬ)

Last updated at Posted at 2023-03-06

こんばんわ。
「今日、某有名IT企業の社長に合ったんだぜ」と自慢したい男(思考が小学3年生)です。

表記の件、自社内で教わりました。
Qiita の過去記事にも無かったので、「オレの手柄」ということで記事化しておきます。

Power Apps の UIデザインって、ぶっちゃけどうっすか?

いやね、Power Apps ってすごくステキなツールだと思うんすよ。
すごく簡単にWebアプリが作れるし。ホントに、生産性爆上がりっすよ。
大好きなんですけど。
ですけどね・・・。

大きな声では言えないですが、正直、UIが微妙だなーって。昔から思ってて。
おそらく、ユニバーサルデザインとか、視覚障害のある方への配慮とか、そういったことだとは思うんですよ。
でも、もうちょっとナントカなんねーのかなぁ、と。

Fluent UI とは

だって、Microsft にも Fluent UI っていう、それっぽいものがあるらしいじゃないっすか。
せっかくなんで、今流行りの Bing チャットに聞いてやりましたよ。

Fluent UI とは、Microsoft が提唱するデザインシステムのことです。
Fluent UI は、見た目だけでなく、革新的なUIやユーザー体験を変えることを目指しています。
Fluent UI は、Microsoft TeamsやWindows 365などの製品にも使われています。

簡単に言うと、良い感じの UI って事だと思うんですが、これを Power Apps で使いたいんですよ。

Power Apps で Fluent UI を使う方法

そんなわけで、Power Apps で Fluent UI を使う方法です。
なんか、個人的にすごく「解せぬ」って話なので、今後のバージョンアップでこの方法は使えなくなる可能性があると思います。
簡単に言うと、
「Teams版の Power Apps で貼り付けたオブジェクトを、Web版の Power Apps にコピペする」
ってことで出来ます。

手順1)

Teams版 Power Apps にオブジェクトを貼り付ける(この例では「テキストボックス」と「日付の選択」)

手順2)

上記で貼り付けたオブジェクトを選択して「Ctrl+C」でコピーして 、Web版の Power Apps にペースト

以上です。

ほらね、こんなにオシャレに・・・あれ?

良い感じで貼り付けできたので、ドヤって記事を終わろうとしたんだけど、カレンダーコントロールの月選択が微妙にズレている。
これ、4列で表示しようとして、明らかになんかやらかしてるじゃん。

Teams版でも同じだ。ぐぬぬ・・・。そのうち改善されるとは思うんだけどさぁ・・・。

結論

まぁ、あれだ。
信じて待っていれば、そのうちオシャレになるんじゃないっすか。

参考資料

追記 (2023/03/07)

Creator Kit をインストするとコンポーネントが使えるようになります。
ただ、単体のアプリで使う場合は前述のコピペの方がラクかも。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1