こんにちは。またまたFlutterFlow(フラッターフロー)で新機能がでました。「walkthroughs」という機能で、はじめてそのアプリを使う人に「このボタンは〇〇のために使います」「〇〇を見たい人はこのアイコンをクリックしましょう」のような解説をできる機能です。具体的に以下のような感じです。かっこいいですよね!これが簡単に作れます。今回はこのFlutterFlowの新機能・Walkthroughsについて解説していきたいと思います。FlutterFlow新機能:Walkthroughsの使い方まずはSetting and IntegrationsからWalkthroughsを選択します。Create Newを選らんで新規に作りましょう。以下のようにnameを決めて、対象のPageを選択します。あとは、WalkthroughのStepをどんどん追加していきます。各ステップでは、まずWidgetを選択します。すると、右側のプレビューでWidgetを選べるようになります。選んでConfirmします。次に、contentを選びます。このcontentとはウォークスルーするときに表示されるコンポーネントのことです。以下みたいなやつですね。それを選択します。まだ作ってない人は好みのコンポーネントを作りましょう。その際にはパラメータを渡せるので、コンポーネント側で表示させたいパラメータを用意しておきましょう。(説明のテキストや画像など)他にも細かい設定はありますが、だいたいこんな感じです(細かいところは動画で解説していますので参考まで)画面のOn Page Loadアクションでwalkthroughを開始あとはウォークスルーをスタートするだけです。On Page Loadアクションでwalkthroughを選択しましょう。これだけです。簡単ですね!あとは、こういうチュートリアルは1回目しか表示させないのが一般的なので、どこかにフラグなどを持ち2回目以降は表示させないような制御も必要ですね。ぜひ試してみてください。Youtube動画での解説はこちらFlutterFlowのWalkthroughsについて動画でも解説してみたので詳しくはこちらをどうぞ。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2F6RwXIRfrZ5E%3Fsi%3DW9BAMlwZ7n2xdSR3%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3Eアプリ・Webサービスの開発の無料相談はこちらFlutterFlow、Adalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。