未来エンジニア養成所Blog

月単価180万以上のプログラミング講師がプログラミングを皆に楽しんでもらうための情報をお届けします。

【Bubble/ノーコード】別のページに移動する

title


クリックすると別のページに移動する

クリックすると別のページに移動するワークフローを作ってみましょう。


まずは下記のように「Textエレメント」を作成します。

文字、形、色などは何でもOKです。

textエレメント



次に移動先のページを作ります。

画面左上にある「Page 〜」の「▼」をクリックします。

page



「Add a new page ...」を選択して新しいページを作ります。

add a new page



今回は「Page name」を「second」として、「Clone from」はなしで作成します。

create a new page



「CREATE」をクリックすると新しいページが作成でき、ページが「second」になります。

create



ページが変わったことをわかりやすくするために、「textエレメント」を作成しておきます。

second page



元のページに戻り、ワークフローを設定します。

「textエレメント」のプロパティを表示して、「Start/Edit workflow」をクリックします。

work flow



テキストエレメントをクリックした時のアクションを設定します。

「Click here to add an action ...」で「Navigation」から「Go to page ...」を選択します。

Navigation



「Destination」で移動先のページを指定します。

今回は「second」ページに移動させたいので、「second」を選択します。

Destination



これでワークフローの設定が完了しました。


プレビューで動きを確認してみます。

preview



表示されたテキストをクリックします。

second



「second」ページに移動しました!


参考図書



独学で挫折しそうになったら、オンラインプログラミングスクール
未来エンジニア養成所Logo