こんにちは。今日はノーコード(ローコード)のFlutterFlowでw文字リアクション機能を実装してみたので紹介したいと思います。

SlackやLINEでもお馴染みのリアクション機能、便利ですよね。

ノーコードのFlutterFlowではこんな絵文字リアクション機能も実装しちゃうことができます。

ではみていきましょう。

そもそもリアクション機能とは?

リアクション機能とは、一言で言うとユーザーがコンテンツに対して感情や意見を直接示すことができるインタラクティブな機能のことを指します。ソーシャルメディアプラットフォームでよく見かける「いいね」や「ハート」、「驚き」や「怒り」などの絵文字ボタンが一例です。

意見や感情を文章にするのは時間がかかる場合や、言葉にするのが難しい場合があります。絵文字リアクション機能は、そのようなユーザーのニーズに応え、短時間で感情を伝える方法を提供します。

そもそもリアクション機能とは?

↑つまり、こーゆーのですね!

FlutterFlowには絵文字リアクションのテンプレートがある

なんと、FlutterFlowには絵文字のリアクション機能のテンプレートがすでに存在しています。これを参考にカスタマイズすることで色々できちゃいます。

では早速テンプレートを見てみましょう。

MarketplaceからEmojiで検索するとこんな感じで検索され、

FlutterFlowには絵文字リアクションのテンプレートがある

Emoji Reaction Sliderというテンプレートが出てきます!

Emoji Reaction Slider

View Liveを押すと、その場でデモ画面をみることができます。

以下のような画面が表示されます。プラスボタンを押すと...

こんな感じでポップアップがあがり、例えば3つめのハートマークを選択すると、

こんな感じで選択したハートが表示されました!

挙動もサクサク動いて小気味いいですね!

ノーコードはもっさりした挙動になるツールが多いですが、FlutterFlowはそれがなくサクサク動くのが素敵ですね。

テンプレートを元に自前でカスタマイズ

このテンプレートを参考に、自分のアプリのコンテンツ詳細画面にもリアクション機能を組み込んでみました。

こんな感じです。

いい感じですね。

この作り方は以下の動画で解説しているのでみてみてください。

FlutterFlowでの絵文字実装機能をYoutube動画で解説

FlutterFlowの絵文字リアクション機能の実装機能ですが、以下のように動画で解説してみました。
興味のある方はぜひ。

FlutterFlowで絵文字リアクション機能:まとめ

いかがでしたでしょうか?FlutterFlowでは、このような絵文字リアクション機能のように結構複雑そうな機能もサクサク動くレベルで実装することができました。

また、FlutterFlowはテンプレートがあるので、それをベースに解析して修正することで時間を短縮して機能をついかしていくことができるのもメリットですね。

ぜひ色々試してみてくださいね。

アプリ・Webサービスの開発の無料相談はこちら

Adalo、bubble、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。

この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか?

弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。

また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。

アプリ/Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。