Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?

posted at

updated at

Noodlでポップアップメッセージを表示するコンポーネントを作ってみた

今年もやってきましたねアドベントカレンダー!
Noodl Advent Calendar 2020
Noodlの活用情報はまだまだ少ないので、この機会にジャンジャン増やしていきましょう!

この記事ではNoodlを活用して個人開発している、保活支援アプリで作ってみたポップアップメッセージの作り方について解説しています。

実際に作ったもの

記録ボタンを押すとポップアップメッセージが表示されます!

フローの解説

ポップアップ表示部分フローとUIは次のとおりです。
image.png

image.png

使用するノードは次の3つです。
- Animationノード
- Timerノード
- Groupノード

+α 表示させたいポップアップメッセージに使用するノード

Aniamtionノード

Animationノードで特定のパラメータを時間変化させることができます。
今回はOpacity(不透明度)を0~1に変化させています。Duration(変化時間)により0から1まで変化するまでの時間を設定しています。

Animationノードの設定は次の通りです。
image.png

TImerノード

Timerノードでポップアップメッセージを表示させる時間を制御しています。
Timerノードの設定は次の通りです。
image.png
次の図のようにTImerノードとAnimationノードを接続しています。Animationノードの実行終了時にHas Reached Endトリガが発生するので、それをTimerノードのRestartに接続しています。

TImerノードのカウントが終了するとFinishedトリガが発生します。それをAnimationノードのPlay From End To Startに接続しています。こうする事で、タイマー貨運tの終了時にAniamationノードをEndの値からStartの値へと実行する事ができます。
image.png

Groupノード

今回はGroupノードをコンポーネントにして「msg」という名前にしています。msgコンポーネントの中身は次のようにしています。
image.png

Component Inputsノードでmsgコンポーネントの外部からプロパティを受取れるようにしています。今回必要なのはopacitytextです。
(その他は拡張できるように加えています)

opecityは表示されるポップアップメッセー時の不透過度を表しています。
textはポップアップメッセージに表示されるテキストです。

さいごに

以上でざっくりとした解説でしたが、ポップアップメッセージの作り方でした!

Animationノードを使いこなせるようになると、よりインタラクティブなUIを簡単に作れるようになると思いますので、いろいろ試していきましょう!🎄

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?