Kilroy 365

Microsoft365 主にPowerPlatformについての備忘録

COVID-19 ワクチン接種記録アプリとギャラリーの時系列ビュー

f:id:KilroyWaaasHere:20210923014721p:plain

COVID-19ワクチン接種記録アプリ

Power Apps触ってると、やっぱりみんな作りますよね、ワクチン接種記録アプリ。
僕も半分遊びで作りましたが、なんやかんや自分で作ると記録するし、記録できてると色々気づくことが多いです。記録することって大事ですね!
ワクチンの接種記録アプリは用途がはっきりしてますし、記録をスマホで行うことになるので、Power Apps の自動作成アプリっぽいものが基本で、だいたいはそれに+αな感じのアプリになるのじゃないかな?と思いますが、ほかの人はどんなものを作った(作る)のか気になるところです。僕がつくったものも同様に特殊なものでなく、下記のような画面構成で、

  • TOP画面(なくても良いけど、雰囲気だけ)
  • 体調記録のギャラリー画面
  • 体調記録のフォーム画面
  • 接種データ記録のフォーム画面
  • グラフ表示画面(体温推移)
  • 体調記録の時系列ギャラリー画面

TOP画面のメニューもしくは、プルダウンメニューから各画面に行って記録および閲覧を行うシンプルなもの。
特に目新しい機能もないので、大半の解説は省略しますが、+αに当たる、ギャラリーの時系列ビューの作り方について書こうかなと思います。

時系列ビュー

ギャラリーは同じ構成を繰り返すという、特性がありますが、これがとても汎用性高いですよね。
一連の情報を表示するだけではなく、例えばメニュータブであるとか、同じ図形を連続で配置するようなものを作るときは図形をコピペしていくつも配置するより、ギャラリーに図形を埋め込んで連続表示させてやる方が手軽かつメンテ性もよいです。
この辺りは色々とユースケースあるので、知らなかった!という方は調べてみると見るといいかと思います。
今回作った時系列ビューもこの特性を活かし、ギャラリー内に配置した図形がレコード追加とともに積み重なり、タイムラインのように見えるようにしたもので、いたって簡単な作りですが、時系列をわかりやすく表示するにはとても効果的で気に入っています。
構造は以下の図のようになります。
f:id:KilroyWaaasHere:20210925014130p:plain
簡単ですね。四角形2つと円またはボタンコントロール2つの合計4つの図形をギャラリー内に配置してやるだけです。
上の図は縦方向のに時系列を表示する感じで、垂直ギャラリーに配置する例ですが、横方向に配置したい場合は水平ギャラリーに、90度回転したような感じに横向きに配置してください。
いずれの場合も、縦方向の場合は上の四角形の上端および下の四角形の下端、横方向の場合は左の四角形の左端、右の四角形の右端がそれぞれギャラリーのTemplateにピッタリくっつくように配置します。
また、テンプレートのパッディングが0より大きいと隙間ができ、連続したように見えませんので、0に設定します。

始点・終点の処理

上記のように図形を配置すると、図中赤で示した図形が連続することになりますが、時系列のポイントを円で表現していますので、始点及び終点は円から始まる形にすると、ここから始まった、ここで終わった、というのがわかりやすくなります。
そのために、図中に示したように、ギャラリーの最初・最後に表示されるアイテムを特定し、そのアイテムの場合、上または下の四角形が表示されないように処理してやることが重要です。

これはデータの構造やデータの絞り込み方(フィルターや並べ替えの条件)次第で条件を変えてやる必要があります。時系列表示なので、時間を条件にする場合が多いのかなと思いますが、時系列が登録順そのままのようなものは図中に示したようにIDの値で判断してもよいかと思います。(SharePointListなど登録順にIDが附番される場合)

気を付けるべきは絞り込みや並べ替えを行っている場合で、絞り込みや並べ替えを行い、出てきた結果に対して最初・最後の特定を行わなければいけないので、Min,Max関数はギャラリーにつけたのと同じ絞り込み・並べ替え条件を付けたデータソースに対して適用してやる必要があります。

最初・最後のレコードが明確に特定できれば良いので、例えば、従業員の異動履歴を表示するような場合、絞り込み・並べ替えを行ったレコードの最初のレコードにはおそらく入社、最後のレコードには退職を示すデータが入っていると思われますので、その場合はその情報を基に最初、最後を特定してやればよいので、必ずしもMin,Max関数を使用する必要はなく、条件に合わせてシンプルな特定方法を考えてやればよいと思います。

実装例➀

まずは今回のアプリの時系列ギャラリー。

最初・最後はシンプルに、IDで判別しています。
上の四角形のVisibleのコードは以下のようにしています。

If(ThisItem.ID=Min(Filter('COVID-19 ワクチン接種後体調記録',NumberOfShot=drpSC4.Selected.Value),ID), false , true )

『COVID-19 ワクチン接種後体調記録』というデータソースが元ですが、ギャラリー自体に接種回数で絞込をかけているので、その条件も同様に記述しています。  

実装例②

次に、従業員の異動の履歴を時系列表示したものです。

こちらは、 上の四角形のVisibleを

If(ThisItem.Category.Value="入社",false,true)

のように記述しています。下の四角形では『入社』を『退職』としています。 絞り込みや並べ替えをした後にも、最初・最後が明確にわかる条件がある場合はそれを書いてやればシンプルになりますね。 なお、こちらはギャラリーの末尾でも退職していなければ四角形が消えないので、雇用関係の継続も見た目でわかる様になっています。

時系列ビューの作り方でした。

Power Apps フォームの複数行データカードの高さを動的に変化させる方法

f:id:KilroyWaaasHere:20210918000928p:plain

 

発見の経緯

現在、仕事で定例の会議の仕切りをやっていて、各セクションから提出された事前資料のまとめと配布、アジェンダの作成、司会進行、議事録の作成等々、会議前後は毎回そこそこの作業量があります。


会議の内容はほぼ定型で、まとめるのはやりやすく、過去の振り返りや、進捗の管理などもあるため、いっそのこと、全部ひとまとめにしてさぼって改善してやれ、ということで、会議専用のアプリを作ることにしました。

 

その中に議事録のフォームがあり、議事を項目ごとに複数行テキストの形式で保存しているのですが、議事のボリュームがまちまちでデータカードの高さを統一できない問題が発生しました。

高さを大きく取ると少ない時に空白が大きくなり、小さく取ると、スクロールバーが出てきて見栄えが悪い。
なんとかデータカードの高さを議事の内容に応じて動的に変化させられないか?と考えたのが発見のきっかけでした。

 

AutoHeight

はじめは、複数行の行数を取得して、それに応じて、、、みたいなことを考えていましたが、どうも難しそうでした。『Power Apps Multilines text Datacard Height Dynamically』みたいな感じで検索をかけると、出ました。
盲点でしたが、LabelにAuto Heightあるやないですか。
これに同じ文を打ち込んで、高さを取ってやり、データカードのDataCardValueの高さに適用してやればいけそうですね!

 

実装

 

では、実装していきます。サンプルのアプリです。

Iphone13、発表されましたね。
僕の心の声をアプリが表現してくれています。

さておき、デフォルトではデータカード内のテキスト入力には高さ自動調整の機能が無いため、行数が増えるとOverflowした分は表示されず、スクロールバーが現れます。

※準備として、データソース・インプット・追加するLabelはそれぞれ複数行に設定しておいてください。

 

f:id:KilroyWaaasHere:20210918014235p:plain

カードにLabelを追加します。追加するカード内のなにがしかのコントロールを選択した状態で追加するとカード内に入ってくれます。

 

 

f:id:KilroyWaaasHere:20210918014408p:plain

 

次に、LabelのX・Y・WidthをDataCardValueと同じに指定してやります。
この例でしたら、Label1のX=DataCardValue3.X などです。

 

 

 

f:id:KilroyWaaasHere:20210918014643p:plain

次に、LabelのTextを、Parent.Defaultと指定してやります。これでLabelにカードのデフォルトの値(DatacardValue)が指定されたので、入力値と同じテキストがLabelに表示されます。

 

 

 

f:id:KilroyWaaasHere:20210918014854p:plain

Labelの高さの自動調整(AutoHeight)をONにします。デフォルトはOFFになっています。
テキストの行数に合わせてLabelの高さが変わりました。
テキストが重なって少し太くなったように表示されているのがわかると思います。ほぼぴったり重なっています。


f:id:KilroyWaaasHere:20210918015320p:plain

Labelを追加した時点では、Labelがカード内で一番上に来ていると思いますので、DataCardValueに入力できるよう、最背面に移動させます。

Labelは高さを取るためだけにあるので、表示させたくないのですが、Visibleをfalseにして完全に消してしまうと、AutoHeightの値が取れなくなってしまうので、最背面に、また、テキストの色も念のためTransParent(透明)に指定してやります。
Labelのフォント、サイズ・WidthがDataCardValueのものといっしょであれば、改行・折り返しなど、全く同じ位置になります。


 

f:id:KilroyWaaasHere:20210918020945p:plain

ですので、あとはDataCardValueのHeightにLabelのHeightを指定してやれば、DataCardValueもAutoHeightの機能を手に入れることになります。
好みで、少し余白を入れたりすると見栄えが良くなると思います。
同じく、DataCardそのもののHeightも、Labelの高さ+αを指定してやると、めでたく実装成功です。

 

実装結果

 

実装後はこのように、入力内容に応じてデータカードが動的に高さを変え、見やすいフォームが出来上がります。やったね♪

 

なにがしかの参考になれば幸いです。

コンポーネントでのCollectionの利用について(PowerAppsでHSLAカラーピッカーコンポーネントを作ってみました。 その3)

f:id:KilroyWaaasHere:20210915212823p:plain

コンポーネント内でのコレクション利用はサポート外

コンポーネントでのコレクションの使用は、オフィシャルには、不可となっています。

f:id:KilroyWaaasHere:20210915180229p:plain

https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/create-component#known-limitations


また、今回の話と逆の方向ですが、コンポーネントの設定にて、アクセスアプリスコープをONにするとコンポーネント内から、アプリのコレクションやグローバル変数にアクセスできるとなっていますが、これも現在の環境では設定が無いっぽい。

f:id:KilroyWaaasHere:20210915181441p:plain

https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/create-component#scope


まだコンポーネントライブラリはプレビュー段階ですし、中には試験段階の機能もあるので、この辺りは致し方ないところでしょう。

 

いや、使えるっぽい

カラーピッカーのコンポーネントを作った際、なんとか作った色と、付随情報をレコードとして保存して利用したいと思ったのですが、情報をストアするとなったら、やっぱりコレクションが使いたくて(コレクションがサポート外だというのは知っていました)、ダメもとでやってみると、あれ?使える・・・?という感じでした。
ただ、警告は出ます。アプリにインポートした際、名前が競合する場合があるので、避けてください、とのことでした。非推奨ってことですね。
確かに、同じ名前つける、はありそうですし、同じコンポーネントを複数使用した時など、エラーが起きそうな気はします。
使用の際は、自己責任で、オフィシャルなアプリには使わないほうがよさそうです。

f:id:KilroyWaaasHere:20210915182931p:plain

コンポーネント外へのデータの受渡し

これにはちょっとハマりました。コレクションに保存した色情報をコンポーネント内のギャラリーに表示して、カラーサンプルとして使用する目論見はうまくいったのですが、やはりコレクションなので、アプリを立ち上げている間だけしか情報が保存されません。アプリのコントロールなどに適用した色の情報を長期的に保持したいなら、コレクション内の情報をコンポーネント外に出力して保存する必要があります。

コンポーネントの出力には、テーブル型のデータを設定できるので、コレクションが使えるならコレクションをそのまま指定してやれば…と思いましたが、コンポーネント内ではエラーが出ないのに、コンポーネントをアプリにインポートしてやると、エラーが出て中身が読めません。(列情報は取得できる)

コレクションという形をとっているのがまずい(多分これが原因)のかと、コレクションの情報をコンポーネント内でテーブル化し、引き出そうとしたりしたのですが、結局のところ、コレクションからデータを引き出す関数のデータソースにコレクションを指定することになるので、エラーがでてしまい、どうにもうまくいきませんでした。

しかし、ありました。回避策!

コレクションからデータが引き出された形になっているものがコンポーネント内に存在していました。それも目の前に。そう、ギャラリーです。
ギャラリー内には、コレクションから吸い出されたデータがありますので、テーブル型のアウトプットに、『ギャラリー名.AllItems』と指定してやると、エラーを出さずにコレクション内の情報をテーブルとして出力できました。これでコンポーネント内のデータをコンポーネント外に出力できるようになりました。
かなり苦戦しましたが、発見した時は、おっしゃ~!と思わず声が出てしまいました。


まとめ(発見したこと)

  • コンポーネントでのコレクションの利用はサポート外(オフィシャルには使用不可)だが、非推奨であるだけで、使用は可能(自己責任で)。
  • コレクションの中身をコレクション外にエクスポートするときは、データ型をテーブルとし、ギャラリーのAllItemsプロパティを使うとうまくいく(コレクションをデータソースとして指定する記述はエラーが出る)。

PowerAppsでHSLAカラーピッカーコンポーネントを作ってみました。 その2

f:id:KilroyWaaasHere:20210915003038p:plain

今回は、前回のおはなし

PowerAppsでHSLAカラーピッカーコンポーネントを作ってみました。 その1 - Kilroy 365

のつづきその2です。
前回はHSLAをRGBAに変換するところまで行きましたが、今回はそれをコンポーネント化しました。そのコンポーネント本体について説明していきます。
作ったものの見た目はこんな感じ。

f:id:KilroyWaaasHere:20210915004341p:plain

コンポーネントの用途

コンポーネントは一般的に、アプリに追加してアプリの部品としての利用が多いと思いますが、これはアプリ開発時の開発ツールとしての利用を想定しています。
アプリ開発する画面に挿入して、その他のコントロールの色を設定する際の補助に使用します。

主な機能は以下。
・HSLAを用いて色の作成
・表示色による比色
・作成した色のRGBA値の利用(ラベルのテキストをコピペ)
・作成した色のHSLA地の表示(HSLA値がわかれば同じ色を作成できます)
・作成した色の一時保存と削除(コレクション利用)
・保存した色の切り替え表示
・作成した色の情報の出力

 

動作はこんな感じ

 

右が作ったコンポーネント。ちょっとまどろっこしいですが、再生モードにしてRGBAのテキストをコピー、編集画面に戻して貼り付けです。
コンポーネントからは出力として、

  • 表示中の色(RGBAの形式)
  • RGBAのテキスト
  • HSLAのテキスト
  • 保存した色情報(コレクションに保存した色のレコード)

を出せるようにしてあるので、必要であれば、保存した情報を別途外部に記録することもできるようにしてあります。上の動作サンプル動画では、コンポーネントにストアしたコレクションのデータを取得し、左のギャラリーに表示しています。

また、おまけのような機能ですが、コンポーネントの特徴として、中身の大きさが変わらない、というのがあるので、動画でやっているように、サイズを調整して上の色表示部だけを表示させてあちこち移動し、カラーサンプルとして配色を検討する、なんてこともアリです。


達人はもっとすごい

とてもタイムリーですが、MVPのHiroさんが同様に、色をテーマにした開発ツール(カスタムコネクタ)を開発されていました。いやはやすごい…。
興味がある方はこちらも参照されてみてはいかがでしょうか。

mofumofupower.hatenablog.com

PowerAppsでHSLAカラーピッカーコンポーネントを作ってみました。 その1

f:id:KilroyWaaasHere:20210914034532p:plain

はじめに

Twitterを流し読みしていると、こんなツイートが流れてきました。

いつもPower Pointを中心にいろいろなデザイン関連のツイートをされているネスコプラズムさんのツイートでした。HSL、便利そう!

 

Power Appsでの色指定

Power Appsでの色指定は、Color列挙体(組み込み色の名前で指定)、ColorValue(16進数値で指定)、RGBA(Red,Green,Blueの3原色ブレンド+不透明度で指定)の3種類のやり方があります(以下参照)。

docs.microsoft.com

僕は上記のdocsを参照し、代表的な色を色名で直接指定するか、その色のRGBAを取ってきて微調整するか、というやりかたがほとんどでしたが、微妙な色の調整やトーンの統一など、とてもやりにくいというのが本音でした。


HSLAの利点

HSLAは上記のツイートにあるように、Hue(色相)をまず選び、Saturation(彩度)、Lightness(輝度)を調整して同系色で異なるトーンの色を作ったり、その逆でトーンを固定し、同じトーンの異なる色味の色を作るなど、直感的に色を作る、調整することがとても簡単です。これをPower Appsで利用できたらいいのに!ということで、実装できる方法はないのか調べてみました。

調べると、HSL➡RGBの計算式があるようで、沢山ヒットしますし、他言語でのコードサンプルも結構出てきます。
単純に計算式そのものが載っているこちらのページの情報を参考に、実装していくことにしました。

www.peko-step.com

 

HSLA→RGBAの計算

With関数を使えば、ほぼそのまんま記述できます。

H、S、L、Aそれぞれの値をスライダーで調整することとし、場合分けをちょっと整理して、コードはこんな感じです。

  RGBA(
        Round(
            With(
                {
                    MAX: If(
                        sldL.Value <= 49,
                        2.55 * (sldL.Value + sldL.Value * sldS.Value / 100),
                        sldL.Value >= 50,
                        2.55 * (sldL.Value + (100 - sldL.Value) * sldS.Value / 100)
                    ),
                    MIN: If(
                        sldL.Value <= 49,
                        2.55 * (sldL.Value - sldL.Value * sldS.Value/100),
                        sldL.Value >= 50,
                        2.55 * (sldL.Value - (100 - sldL.Value) * sldS.Value/100)
                    )
                },
                If(
                    sldH.Value <= 59 || sldH.Value >= 300,
                    MAX,
                    sldH.Value >= 60 && sldH.Value <= 119,
                    (120 - sldH.Value) / 60 * (MAX - MIN) + MIN,
                    sldH.Value >= 120 && sldH.Value <= 239,
                    MIN,
                    sldH.Value >= 240 && sldH.Value <= 299,
                    (sldH.Value - 240) / 60 * (MAX - MIN) + MIN
                )
            ),
            0
        ),
        Round(
            With(
                {
                    MAX: If(
                        sldL.Value <= 49,
                        2.55 * (sldL.Value + sldL.Value * sldS.Value / 100),
                        sldL.Value >= 50,
                        2.55 * (sldL.Value + (100 - sldL.Value) * sldS.Value / 100)
                    ),
                    MIN: If(
                        sldL.Value <= 49,
                        2.55 * (sldL.Value - sldL.Value * sldS.Value/100),
                        sldL.Value >= 50,
                        2.55 * (sldL.Value - (100 - sldL.Value) * sldS.Value/100)
                    )
                },
                If(
                    sldH.Value <= 59,
                    sldH.Value / 60 * (MAX - MIN) + MIN,
                    sldH.Value >= 60 && sldH.Value <= 179,
                    MAX,
                    sldH.Value >= 180 && sldH.Value <= 239,
                    (240 - sldH.Value) / 60 * (MAX - MIN) + MIN,
                    sldH.Value >= 240,
                    MIN
                )
            ),
            0
        ),
        Round(
            With(
                {
                    MAX: If(
                        sldL.Value <= 49,
                        2.55 * (sldL.Value + sldL.Value * sldS.Value / 100),
                        sldL.Value >= 50,
                        2.55 * (sldL.Value + (100 - sldL.Value) * sldS.Value / 100)
                    ),
                    MIN: If(
                        sldL.Value <= 49,
                        2.55 * (sldL.Value - sldL.Value * sldS.Value/100),
                        sldL.Value >= 50,
                        2.55 * (sldL.Value - (100 - sldL.Value) * sldS.Value/100)
                    )
                },
                If(
                    sldH.Value <= 119,
                    MIN,
                    sldH.Value >= 120 && sldH.Value <= 179,
                    (sldH.Value - 120) / 60 * (MAX - MIN) + MIN,
                    sldH.Value >= 180 && sldH.Value <= 299,
                    MAX,
                    sldH.Value >= 300,
                    (360 - sldH.Value) / 60 * (MAX - MIN) + MIN
                )
            ),
            0
        ),
        sldA.Value / 100
    )

※sld~はスライダー。
RGBの値をそれぞれ整数にするのに、Roundを入れていますが、なくてもOKです。

不透明度のAはRGBA、HSLAどちらも同じなのでそのまま。Sliderの値が整数なので、0~100のスライダー値を100で割って出してます。
HSLAとRGBAの比較は以下のような感じ。

今日はここまで、次回に続きます。

Power Apps で電光掲示板のようなものを作る。

 はじめに

タイマーコントロールが便利そうだったので、何か作れないかな?と考えたときに、ふと、ラベル動かして電光掲示板みたいなの作れそう、と思ったのがきっかけです。時間の変化が値として取得できるので、これを色々なプロパティやらに当てはめてやれば、動きのあるものを作るのにもってこいです。便利~♪

作ってみたもの

では、作ってみたものです。
スクリーン上に黒い帯(四角形)をバックグラウンドとして配置、その上をテキストラベルがタイマーコントロールの時間経過とともに右から左に動いていく感じです。
テキストのカラーをオレンジにすると電光掲示板チックに見えます。
ただ流れていくだけでは物足りないので、テキストを点滅させてみました。
警報っぽい見た目になったので、テキストもそれっぽい内容のものにw

材料

解説用にあとから付け足したラベルとかもありますが、メインのコントロールは以下の4つ。

①テキスト表示用のラベル

  • これが電光掲示板に表示されるテキストになります。

②バックグラウンド用の四角形

  • 電光掲示板の背景ですね。四角形のFillをBlackにしているだけです。

③テキストを動かす用のタイマーコントロール

  • テキストを動かす時間を設定しています。
  • Durationの設定で、テキストの動く速さが決まります。
  • 解説のため表示していますが、タイマーコントロール自体は表示の必要がないので、Visibleをfalseにするか、XまたはYのプロパティの設定でスクリーン外に表示し、デザイナーでいじるときだけ見えるようにしておけばいいかと思います。

④テキスト点滅用のタイマーコントロール

  • テキスト点滅の時間を設定しています。
  • Durationの設定で、テキストの点滅周期が決まります。

f:id:KilroyWaaasHere:20210725013923p:plain


詳細

まずは、③テキスト移動用のタイマーコントロールの設定です。

f:id:KilroyWaaasHere:20210725020035p:plain

AutoStartでタイマーを自動スタートさせ、Repeatで自動的にリスタート。
これで、表示がエンドレスに流せるようになります。
Durationを変えることで、テキスト移動の速さが変わります(仕組みは後述)。
単位はミリ秒になっているので、タイマーの設定時間をを1秒にしたいなら1000を設定。12秒がちょうどよい感じだったので、12000としています。

 

 次に④テキスト点滅用のタイマーコントロールの設定。

f:id:KilroyWaaasHere:20210725021502p:plain

テキスト移動用のタイマーと同じですね。点滅の速さ的に2000ぐらいがちょうどよかったですが、この辺りは好みによるところ。

 
ここから、➀テキストラベルの設定です。動き・点滅ともに仕組みはここの設定で成り立っています。

f:id:KilroyWaaasHere:20210725145130p:plain

表示する文字列

まずは実際に表示する文字列。電光掲示板なので、アプリ上で自由に表示を変えられるよう、どこかに入力コントロール仕込むなり、変数使うなり、文字列を可変にする運用がよさそうですね。
WidthにLen関数(文字列の長さを返す関数)を仕込んでおけば、ラベルの長さも文字列に見合った幅になります。使っているフォントサイズ×22でちょうどよい感じだったので22をかけていますが、ここは使用しているフォントやサイズが変われば調整の必要アリです。


文字を動かす

次に、文字を動かす仕組みです。ラベルのXプロパティを時間変化に伴って変化させるとラベルが横方向に動きます。

一定の速度で動かし、タイマーの開始とともに移動がスタート、タイマーの終了と同時に移動も終了するようにするためには、時間経過の割合を使います。

時間経過の割合は、タイマーの時間経過(タイマー名.Value)をタイマーの長さ(タイマー名.Duration)で割ってやると求まります。
このアプリでの場合、以下のように設定をしています。

 

f:id:KilroyWaaasHere:20210727062329p:plain

テキストの点滅

次にColorプロパティを使ってテキストの点滅を表現します。

RGBA(255,191,0,1)がオレンジなので、ベースをこれにして、アルファ値(4番目の引数、透過度を0~1の範囲で指定)を変化させ、点滅を実現します。
時間経過に伴って0〜1の範囲で値を動かすには、文字を動かすのと同様、時間経過割合を使います。
時間経過をの割合をX、色の透過度をYととらえると、色を濃くしていく場合、Y=X となります(0≦X≦1)。逆に、色を薄くしていく場合はY=1-Xとなります。変数を設定して、タイマーが終了、又はスタートのタイミングでY=XとY=1-Xを切り替えてやれば、
点滅しますね。
グラフで表すと以下のような感じ。

f:id:KilroyWaaasHere:20210728011132p:plain

具体的には、アルファ値を

If(
varTextBlink = true,
1-timTextBlink.Value/timTextBlink.Duration,
timTextBlink.Value / timTextBlink.Duration
)

と設定したのですが、変数の切り替え処理の関係か、不安定な挙動だったので、変数を使わなくて済むよう、以下のようにしてみました。

下図実線部分がY=|2X-1| のグラフで、タイマー開始時はオレンジ、時間経過とともに色が薄くなっていき、タイマーが半分のところで色が透明、今度は色が濃くなっていき、タイマー終点でオレンジに戻る、という感じです。

f:id:KilroyWaaasHere:20210728012219p:plain

絶対値はAbs関数を使えばよいので、アルファ値の設定は、
Abs(2*timTextBlink.Value/timTextBlink.Duration-1)

となります。

タイマーを繰り返し動くようにしておけば、点滅してくれますね。
挙動もばっちりでした。

ちょっと改善

 ブログでグラフを使った説明を書いてるうちに、2次関数でも行けるなぁと思ったので、ちょっとやってみました。
説明は省きますが、Power関数を使って、アルファ値を
Power(2*(timTextBlink.Value/timTextBlink.Duration-0.5),2)
としてみると、心持ちですが、点滅が自然な感じになったので、コンポーネント化する場合は、こちらを採用しようと思います。

 後半のVer.2が2次関数使ったバージョンです。ほんとに微々たる差だw

おわりに

タイマーコントロール、初めて使ってみましたが、アイデア次第でかなりいろいろなことが出来そう。
ネタ思いついたらまたブログに上げてみたいと思います。
しかし、頭の中ではシンプルにやってるつもりでも、いざブログにあげると説明がごたごたしすぎてる…。


 

 

Power Automate Blog がupdateされたよ。AI Builder関係の文書処理機能が強化されたみたい。

はじめに

今回のPower Automate blogの内容は、AI Builderの2021年7月のアップデート情報です。

文書の自動化処理機能がだいぶ強化されたみたいですね。

元記事はこちら。

https://flow.microsoft.com/ja-jp/blog/ai-builder-july-2021-update/

 

ここから翻訳

では、翻訳していきます。

 

 

We are excited to announce the general availability of several AI Builder capabilities, new additions which will improve our document automation capabilities, as well as some language and geographic coverage extensions.

新たに追加された、文書自動化機能を改善するいくつかのAI Builderの機能のGA(一般公開)、また同じく、いくつかの言語への展開と(地理的な)範囲の拡大をアナウンスでき、とても喜ばしく思っています。

 

Scenarios becoming generally available

GAになるシナリオ


Several AI Builder models have graduated out of preview and reached general availability.

いくつかのAI Builderモデルで一般公開されるシナリオは、プレビューから卒業し、めでたくGAとなりました。

 

In past months, we enhanced AI Builder with new capabilities which are now production-ready:

Invoice processing – Read and save information from invoices which now also include the ability to extract line items.

提供準備が整った新機能を搭載したAI Builderを、我々は過去数ヶ月にわたり進化させてきました:

インボイス(明細書)処理-今では明細情報の抽出機能も含む、明細書からの情報の読み込みと保存。


Receipt processing – Read and save information from receipts, with support now for sales receipts from Australia, Canada, United States, Great Britain, and India.

レシート処理-レシートからの情報の読み込みと保存。オーストラリア、カナダ、アメリカ、イギリス、インドでは売上表についてもサポートされます。


Identity document reader – Read and save information from identity documents.

身分証明書リーダー-身分証明書からの情報読み込みと保存。


You can try out these AI models today directly from the AI Builder page.

これらのAIモデルが、AI Builderページから直接お試しいただけるようになっています。

 

Generally available products and services are considered production ready.

GAされる製品とサービスは提供準備が整った状態にあります。


By moving out of preview, these models become premium. You will need an AI Builder license or an active trial to continue using them.

プレビューからの卒業により、これらのモデルはプレミアム機能となります。使用の継続には、AI Builder ライセンスか、有効な試用ライセンスが必要になります。

 

In addition, new features on existing generally available scenarios will now also be production ready.

さらに、すでにGAとなっているシナリオの新機能が同様に、提供準備完了となっています。

 

Train using documents that have different layouts – This feature was released in public preview last November and allows users to create a unique form processing model that will extract the same information from up to 100 different document layouts.

様々なレイアウトの文書を使った訓練-この機能は昨年11月にプレビュー機能となったもので、ユーザーは100種類までの異なったレイアウトの文書から全く同じ情報を抽出する独自のフォーム処理モデルを作れるようになります。


Ability to specify the page to be analyzed (available mid July) – Form processing, invoice processing and receipt processing models can now specify a page or page range to be analyzed in the Power Automate action.

解析するページの特定機能(7月中旬から利用可能)-フォーム処理、明細書処理、レシート処理モデルは、解析すべきページやページ範囲をPower Automateのアクションの中で特定することができます。

 

This is useful to process only the relevant parts of the documents reducing prediction costs.

これは、予測についての労力を削減し、文書内の必要な部分のみを処理するのに有効です。


For additional resources on AI Builder, visit Power Apps and learn how your users can make their apps AI enabled, or go to Power Automate and learn how your users can make their workflow solutions better with AI.

AI Builderへの追加リソースとして、Power Appsでユーザーがアプリをどの様にしてAI利用可能にできるか学んだり、Power AutomateでどのようにAIを用いてワークフローソリューションを改善できるか見てみて下さい。

 

Please visit our pricing pages to learn more about the AI Builder capacity add-on for your appsand workflows.

アプリとワークフローに使えるAI Builder機能のアドオンについてさらに学ぶなら、価格ページを訪れてみて下さい。

 

Visit our Licensing page for more information on licenses and trials.

ライセンスと試用についての更なる情報はライセンシングページを訪れて下さい。

 

Support of additional languages

追加言語へのサポート


We have added the support of new languages for sentiment analysis and key phrase extraction.

新規の言語へ、心情解析とキーフレーズ抽出のサポートを追加しました。

 

See Language support – Text Analytics Sentiment Analysis and for Text Recognition, see Language Support – Text recognition

テキスト解析による心情解析→言語サポート

言語サポート→文字認識

を参照して下さい。

 

For text recognition, this also includes some OCR performance improvements.

文字認識には、OCRパフォーマンスの改善が含まれます。

 

AI Builder leverages Cognitive Services Computer Vision.

AI BuilderはComputer Visionの認識サービスを向上させます。

 

You can access the list of all languages supported with version 3.2 here – Language support – Computer Vision.

バージョン3.2でサポートされる言語リストはここからアクセスできます。

言語サポート→Computer Vision 

 

Coming soon: Form processing will support documents from these 73 different languages later this summer including Japanese and Chinese.

Coming Soon: フォーム処理は今夏の後半には、日本語と中国語を含む73の異なる言語の文書をサポートします。

 

 

Making it easier to use your form processing model in cloud flows

クラウドフローでのフォーム処理モデルの使用が簡単になります。


One popular scenario that customers are using form processing for is to automate data extraction from documents received by email.

顧客がフォーム処理を使用するポピュラーなシナリオの一つが、emailで受けとった文書からのデータ抽出です。

 

Now, after training and publishing a form processing model and selecting Use model a New flow in Power Automate, you will land in an end-to-end functional cloud flow that will process documents from email attachments.

フォーム処理モデルをトレーニングし、発行して、Power Automateの新しいフローからユースモデルを選択すれば、emailの添付ファイルから文書を処理する、一貫した効果的なクラウドフローに乗り入れられるようになります。

 

You can test the flow right away to see it in action and then tailor it to meet your business needs.

動作テストがすぐに行え、ニーズに合った形にアレンジできます。

 

Confidence scores and automatic validation in document automation

文書自動化における信頼性スコアと自動バリデーション


The prebuilt end-to-end solution for automating the processing of documents has been updated with new capabilities to enrich and simplify the pipeline.

デフォルトで実装済みの文書処理自動化の一貫したソリューションはパイプラインの効率を高め、シンプルにするための新機能とともに、アップデートされました。

 

When the data has been extracted from documents, some basic validation rules are now executed to check empty or not recognized fields and detect low confidence.

データが文書から抽出されるとき、いくつかの基本的なバリデーションルールでは空、もしくは認識されていないフィールドのチェックが実行され、信頼性の低いものを検出します。

 

In this case, the documents must be reviewed by a human, the confidence of each field being now visible in the validation application.

このようなケースでは、文書は人の手で見直す必要があり、それぞれのフィールドの信頼性はバリデーションのアプリで視覚化されます。

 

Otherwise, the data extracted can be automatically exported to the target system.

そのほかに、抽出されたデータを自動的に目的のシステムにエクスポートすることが可能です。

 

Availability in US GCC, GCC High, and Switzerland

US GCCGCC High、スイスでの適用

※ここはあんまり関係ないので割愛。

 

Other enhancements

その他の 機能強化


We have improved the export and import reliability of solutions containing models retrained multiple times.

何度もの再トレーニングを受けたモデルに含まれるソリューションのエクスポート・インポートの信頼性を改善しました。


Makers on the tenant’s default environment can now enable AI Builder and Dataverse from the AI Builder home page if missing.

テナントのデフォルト環境にいる作成者はAI BuilderとDataverseが見つからないとき、AI Builderのホームページから利用できるようになりました。

 

おわりに

AI Builderは全く触れたことがないですし、この先しばらくは触りそうもない気がしますが、なんか未来を感じますねー(適当)

専門用語の訳難しいです。

ニュアンスわかってても、フィットする単語がなかなか出てこない...。

 

そしてGeneral AvailabilityとProduction Readyの違いがよくわからない。

GAが一般公開決定で、実際に実行状態になるのがPRなのか???

と、今回はここまで。

出来るだけ続けていきましょう。

 

 

※この記事内容は個人の備忘を目的としています。見ての通り英語力はお察しですので、翻訳自体の信頼性もかなり怪しいです。

この記事を参考にしたいかなる結果も責任は負いませんので、ご了承ください。

正確な情報は原文または公式の翻訳をご参照ください。