【PowerApps＆PowerAutomate】簡易勤怠登録

こんにちは、Amiです。

 

今回は、PowerAppsとPowerAutomateを使って簡易的な自分の勤怠登録をExcelに記録し、上司に報告するためのアプリを作ってみたいと思います。

 

◆完成イメージ

こんな感じで作成してみました。

左側に出勤時の情報を、右側に退勤時の情報を入力するようにしています。

動画がのせられない・・・💦💦

のせられるようになったら動画ものせたいです・・・これでわかるかなぁ、適当な図だから不安だなぁ・・・・

 

悩みが1点。

PowerAutomateの設定に変数で改行コードの設定をしてもExcelの項目を入れると改行されなかったこと・・・ゲッソリ

もう少し色々試してみないとショック

 

 

◆事前準備

  • SharePointのドキュメントフォルダもしくは、OneDrive上に「勤怠.xlsx」を作成する
  • 「勤怠.xlsx」の情報登録には、テーブル設定が必要

今回は「勤怠テスト」というドキュメントフォルダを作成しその中に「勤怠.xlsx」を作ってみました。

 

◆PowerAppsの設定

タイトルは、先日書いた「ラベル」なので説明を省略します。

 

■タイマーを設定しよう！

時刻を更新するためにタイマーを仕込みます。

「タイマー」は赤枠で囲った手順か青枠で囲っているようにして挿入します。

 

【設定内容】

  • 期間　：　1，000
  • 繰り返し　：　ON(true)
  • 自動開始　：　ON(true)
  • 自動一時停止　：　Off(False)
  • 表示　：　Off
  • OnTimerEnd　：　Set(CurrentTime, Now())
    「CurrentTime」という変数に現在の日時を毎秒でSetするという構文を書きます。
  • Text　：　Text(Time(0, 0, Self.Value/1000), "hh:mm:ss")
    タイマーの表示形式を決める構文を書いています。
メモ構文を書く場合は、右側ペインのText項目には書けません！
　なので、画面上部にあるプロパティから書くようにしましょう🎵

 

 

■日時を表示させよう！

①「Label」を挿入し、選択する

②Textプロパティとなっていることを確認する。なってなければプルダウンで変更する

③下記構文を書く

Text(CurrentTime, "[$-ja]yyyy/mm/dd")

 

これで、日付部分の対応ができました！

 

画像にチラリ（堂々とか！？）と見えている「//"2021/12/1"」はコメントアウトしているなので無視してくださいガーン

コメントアウトする場合は、「//」としてくださいねｗ

注意構文があっていても、見えない状態になりますのでご心配しないでください。

 

続いて、時間を・・・

日付の部分で対応したのとほぼ同じです。

異なる部分は、Text項目になるので、下記構文を入れてください。

Text(CurrentTime, "[$-ja]hh:mm")

 

秒数がきちんと進んでいるかも見たかったので、おまけでもう一つ。

時間と同様にText部分のみ下記構文を入れてください。

Text(CurrentTime, "[$-ja]hh:mm:ss")

 

これで秒数が進んでいるのが確認できます。

私のやってみたい衝動のために、余計なことばかり追加されていく気がします。。。

 

■体調連絡設定しよう！

「Label」と「Dropdown」を利用します。

まずは、Labelからなのですが、先日書いた「ラベル」を参照にしてみてください。

 

【設定内容】

テキストと位置を少し移動させた程度です。

  • テキスト　：　“体調は？”
  • X　：　126
  • Y　：　151
 
さて「DropDown」の設定をしていきましょう！
挿入方法は、いつものように赤枠か青枠の手順で対応してください。
 
選択肢の情報も今回は、PowerAppsに埋め込んでしまいました💦
 
【設定内容】
  • items　：　["良好","熱っぽい","不調"]
  • Default　：　“良好”
 
■体調が悪い時のコメントを追加しよう！
体調が、「良好」であれば必要ないですが、
「熱っぽい」　だったら、熱は何度あるのか
「不調」　だったら、どういう風に調子が悪いのか
を記入しなくてはいけません。（我が社では・・・）
 
ということで！コメント入力欄を設けます！！
 
テキスト入力BOXを青枠・赤枠どちらかの手順で「テキスト入力」BOXを追加します。

 

入力する場所だから、何も記載されてない＆ヒントが書いてあると便利かな❔

さらに、健康状態によって出し分けしたい！！

という設定をします。

 

【設定内容】

  • Default　：　“”
  • HintText　：下記構文を入力する
    ヒントテキスト表示文を「体調は？」の項目で【熱っぽい】を選択場合は、「体温を入力して。。。」とし、【不調】を選択場合は、「不調状況を入力して。。。」と設定しています。

If(Dropdown1.Selected.Value="熱っぽい","体温を入力して。。。",If(Dropdown1.Selected.Value="不調","不調状況を入力して。。",""))

 

  • Visible　：　If(Dropdown1.Selected.Value="良好",false,true)
    「Visible」は表示する（true）、表示しない（False）と設定する場所ですが、上記構文のように、「体調は？」の項目で【良好】を選択した場合は表示しないでそれ以外を選択した場合は、表示してと書いています。
 
 
■今日やること記載欄を作ろう！
直前に行った「テキスト入力」BOXを挿入してください。
あ、Labelもです！
 
「Label」の【設定内容】
  • Text　：　"今日やることは？"
以上です。。。
 
「テキスト入力」BOXのほうは、この設定のままだと1行テキスト(255文字)しか打てないし改行ができないので、そのあたりも変更します。
 
【設定内容】
  • Default　：　“”
  • Mode　：　TextMode.MultiLine
あとは、適当にサイズを整えたら終わりです。
簡単でしたチョキ
 
 
◆ここまでの動作確認をしてみよう！
細長画像ですが・・・
「▷」をクリックしましょう！
 
 
ちょっと動画がなぜか載せられないので画像で画面遷移を・・・
見にくいと思いますが、ご愛敬ということでお願いしますお願い
 
 
きちんと、体調状況に応じてコメント欄のヒントテキストも変わってるし文字も打ててる！！！
 
今度は、登録する部分ですかね・・・
こんな中途半場な感じですが、次回にします。
このペースだともしかして、全４回（？？）
 
ブログって時間がかかるんですねびっくり
 
読んでくれてありがとうございました！
続き、なるはやで頑張ります！！
 
 
 
 
 
 
 
 
 
 
 
 

ポイントタウン12月実績

 

 

【ポイントタウン】12月の実績

 

2021年12月の実績は690ポイントでした。

 

 

ポイントタウンは、20ポイントで1円とちょっとだけやるせない感じ。。。

34.5円しか稼いでいないってことですねぇ。

 

買い物は別のサイト経由でやる！と決めているので、

アンケートとかほかのこともやればいいのでしょうが、そこまでのやる気がでません。。。

 

【ここから登録すると6,000ポイント300円もらえます】

 

 

【主にやっていること】

赤枠で囲ってみました。

  • 三角くじ（PC/スマホ）　両方できるときはやってます。できないことも多々ｗ
  • ポイントQ：クイズです。1日4回までできるのですが滅多にできません💦
  • ポイント争奪戦：とりあえず可能な限り毎日クリックしています。
    翌日結果がわかりますが、私は1度も当たったことがありませんえーん
  • ポイっとアンケート：簡単なアンケートに1問回答します
  • かんたんゲームボックス：取り合えずログインします

これだけやれば、スタンプラリーが完成するので1ポイントもらえます。

スタンプラリーは、7日間連続で行うとさらに5ポイントもらえますｗ

  • クリックコーナー：4か所のバナーをクリックしてポイントをもらえます。
  • うさぎくじ：ウサギくじマークをクリックして当たれば5ポイント（？）もらえますが、これまた当たったことがわたしはないのですガーン
  • ナンプレ：ナンプレは好きなので可能な限りやります。完了しても即時ではもらえません
  • クロスワード：これまた好きなので可能な限りやります。これも完了しても即時ではもらえません。

あとは、時間に余裕があればメールをポチッとして1ポイントもらうようにしています。

 

 

こんな感じで12月もやっていました。それで690ポイント、まぁまぁもらっていると思い込むことにします！

 

交換先は、意外と多く下記の通りです。

交換手数料も無料だったりするので、いいですねｗｗ

トラノコかbitcoinでも始めてみようかしら・・・とか考え始めています。

 

 

【ここから登録すると6,000ポイント(300円)GETできます！】

 

 

 

最後まで読んでくれてありがとうございました！！！

またよろしくお願いします！！

【PowerApps】キャンバス画面に基本的なパーツを配置してみよう

こんにちは🎵　Amiです。

お正月なのに、何もお正月らしいことはなく書けないので勉強中のPowerAppsの記事の続きを書きたいと思います。

今回は、基本的なパーツをキャンバス画面に設置してみようと思います。
先日も思いましたが、今更感満載ですね💦他にたくさん書いてありますものね。。。


今回の記事でできるようになること

  • ラベルの設定（文字変更・背景色/文字色の変更・位置/サイズ変更・ラベル名変更）
  • ボタンの設定（ページ遷移・戻る）
  • 動作確認の仕方



◆PowerAppsの編集画面起動
PowerAppsのホーム画面左メニューから「アプリ」を選択します。
「キャンバス画面を作成してみよう」でとりあえず作成した「TEST」の右側にある「・・・」をクリックし「編集」をクリックします。
 

Apps_Edit


先日の白紙画面が表示されました。
 

Apps_Open


◆「ラベル」を設置する
■ラベルを挿入する
ラベルに限らず、パーツの挿入を行う方法は2通りあります。

  • 【赤枠】画面上部にある「挿入」から選択する
  • 【青枠】左ペインにある「＋」から選択する

左ペインの挿入から対応する時は、ドラッグ＆ドロップで画面に挿入できます。
 

InsertLabel


テキストラベル「Label1」が挿入されました。
 

AppsLabel



■テキストの編集
テキストの編集方法は３つあります。

  • 【赤枠】画面左上のプロパティが「Text」になっていることを確認し、右側の数式部分に「“入力したい文字”」を入れる
    Point：必ずダブルクォーテーションで囲ってください。
  • 【青枠】右ペインにある「プロパティ」の「テキスト」部分に「入力したい文字」を入れる
  • 【緑枠】画面上のテキストカードをダブルクリックして「入力したい文字」を入れる

今回は、「トップページ　タイトル」としておきます。
 

Apps_textEdit


■背景色とフォントの変更
タイトル部分にしたいので、背景色を紺にして文字を白字にしてサイズを大きくしてみます。
右ペインにある「プロパティ」で対応可能なので、ここですべて変更します。
「フォントサイズ」を「20」にします。
「フォントの太さ」を「太字」にします。
「テキストのアラインメント」を左から２番目にある「左右中央揃え」にします。
 

Apps_textfont
 

「色」の部分は、文字の色と背景の色を変更します。

  • 【青枠】フォントの色は「白」を選択する
  • 【赤枠】背景色は「紺」（！？）を選択する

 

Apps_textfontcolor


今回は、こんな感じで設定してみましたが色々このプロパティをいじってみてイメージに合うものを使ってください。
「■テキストの編集」の赤枠で書いたように、左上のプロパティコントロールを変えて、数式バー（？）部分に設定していくことも可能です。

■位置・サイズの変更
タイトルなので、画面上部・横長にしていきたいと思います。
これも右ペインにある「プロパティ」で変更していきます。
「位置」の「X」軸「Y」軸共に、「0」とします。これで左上部に移動します。
「サイズ」の「縦」を「50」にします。

 

Apps_textsize


横幅は、画面サイズにしたいので画面上部の数式バー（？）の部分で対応してみます。
プロパティで「Width」を選択します。
数式バー（？）で「Screen1.Width」と設定します。
このテキストラベルが入っているスクリーン名が「Screen1」なので、「Screen1」の「Width」横幅を指定していることになります。
　※このような数式は、右ペインにある「プロパティ」では設定できませんのでご注意ください。

Apps_textWidth




ラベル自体をクリック、ドラッグして位置移動やサイズ変更することも可能です。

■ラベル名を編集する
ラベル名に限らず、本当はスクリーン名もわかりやすく修正したほうがよさそうです。
ScreenXやLabelXとかってなっていても数が多くなったらどれが何の項目なのかわかりませんよね？
　※Xは数字です。
そのために、名称変更をします。
下記どちらかお好きな方法で変更してください。

  • 【赤枠】左ペインの「label1」右側にある「・・・」をクリックし、「名前の変更」をクリックして修正
  • 【青枠】クリックして修正

 

Apps_labelName


変更されました！！
 

Apps_labelNameAfter



◆「ボタン」を設定する
■ボタンを挿入する
パーツの挿入を行う方法は2通りあります。

  • 【赤枠】画面上部にある「挿入」から選択する
  • 【青枠】左ペインにある「＋」から選択する

左ペインの挿入から対応する時は、ドラッグ＆ドロップで画面に挿入できます。
 

Apps_buttonInsert


■ページ遷移の設定
ボタンをクリックしたら、「Screen２」に移動する設定を行います。

「Button1」を選択し、「OnSelect」プロパティを選択します。
画面遷移するには、「Navigate」という関数を使います。
数式バー（？）に、入力してみてください。
 

Apps_buttonNavi

途中まで打つと候補が出てきますので、対象の「Navigate」を選択します。
ミスが起こりにくいですね🎵

「Navigate」を選択したら上部に次に何を設定すべきかが表示されます。
これも便利ですね🎵
次は「ナビゲート先のターゲットスクリーン」を設定するようです。

Apps_buttonNavi2


もう既にターゲットとなるスクリーン名が選択できるようになっています！
「Screen2」を選択し、「，」を入力します。
 

Apps_buttonNavi3


ページ遷移する際の動作をどうするのか設定が可能です。
今回は、「Navigate(Screen2,ScreenTransition.None)」と設定します。

Apps_buttonNavi4


ナビゲーションの動作については、「Navigate関数」をご参照ください。

■ボタンのテキスト編集
Textプロパティを「“Screen2へ”」とするor右ペインにある「プロパティ」の「テキスト」を「Screen2へ」としてみます。

Apps_buttonNavi5



■ボタンを挿入する＆戻る設定
「Screen2」画面に遷移した後、「Screen1」に戻るボタンを設置してみましょう。
「Screen2」にボタンを挿入とテキスト変更を行います。ここは前述してるので省略します。
「OnSelect」プロパティに「Back()」と設定します。
 

Apps_buttonNavi6



◆動作確認を行う
設定した動作を確認してみましょう。
確認方法は２通りあります。

  • プレビュー画面で確認
    右上にある「▷」をクリックして、プレビュー画面を開き動作を確認してみてください。
  • 編集画面上で確認
    altキーを押しながら、クリックすると動作を確認できます。

AppsCheck



「Screen1」から「Screen2」へ移動し、戻るボタンを押下すると「Screen1」へ戻ることが確認できました！


今回は、以上です。
次は何かきちんとしたアプリを作ってみてからの投稿にします。
勤怠管理でも作ってみようかな、と今は考えています。

 

ありがとうございました！