関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。Tumblr今回は前回の記事で解説した「4択クイズアプリ」で使用するエレメントを、実際に「Design」タブに配置して設定していく方法を解説したいと思います。Head」としておきます。ここではヘッダーの背景色を「Appearance」-「Color」から水色に設定しています。Head」上に、アプリのタイトルテキストも配置しておきましょう。Group」を配置します。Group」に参照先のデータ設定を行うことで、データベースと連携します。content」で、前回のエントリーで準備しておいたテーブル「Quiz」を選択します。by」で問題番号の「no」フィールドを選択します。Quiz」エレメントは、「Quiz」テーブルから「no」でソートしたデータを取得するように設定できました。クイズ問題は画面に1問ずつ表示したいので、「Appearance」-「Rows」を「1」に設定します。Group」内にデータベースから取得してきたデータを表示させます。表示したいデータは「Quiz」テーブルの以下7フィールドです。あとは吹き出しのイメージ画像と「Q.」ラベルも一緒に配置しましょう。image」-「Upload」から吹き出しのイメージ画像を指定したものと、「Text」の値を「Q.」としたラベルを配置しておきます。次にデータフィールドのエレメントを配置していきましょう。Quiz」上で、「Text」を配置し、名前を「問題番号テキスト」とします。エレメントが増えてくるので、ここからは分かりやすいように日本語で設定していきます。「問題番号テキスト」の「Appearance」で表示したいテキストをデータベースから取得した値に設定します。question」を選択します。これで、Textエレメントにデータベースから取得した値をバインドする設定ができました。選択肢ボタン次に選択肢のボタンを配置していきましょう。choicesA」としておきます。今回は選択肢ごとにボタンの色を変えてみましょう。スタイルは画面左の「Design」タブから「Sytles」に移動します。style」で、選択肢A用のボタンスタイルを作成していきます。button」として作成します。作成したスタイルを「Appearance」-「style」に設定しておきましょう。マウスをロールオーバーした際に色が変わったり、ボタンが非活性時にグレーアウトする設定は「Conditional」から行います。ここでは、ロールオーバーした際は、ボタンカラーの透過率を70%とています。同様に、選択肢BからDまで配置と設定を行います。解説テキストそして最後に、解答後に表示する正解答えのTextエレメントを配置します。explanation」を選択します。load」のチェックボックスを外しておきます。Group」の設定が完了です。正解、不正解アイコン次は、選択肢ボタンを選んだ後に表示される、正解か不正解かの結果アイコンを配置していきます。elements」-「Icon」を選択し、「Appearance」の「Icon」で〇マークを選びます。スタイルは、選択肢ボタンの時に設定した「Styles」タブから、新規スタイルを作成してお好みの色などに編集しておきましょう。アイコンではなく画像を使用しても良いですね。load」のチェックは外しておきます。同様に、不正解時のアイコンも配置しておきましょう。state」について解説したいと思います。ユーザー登録...2019-08-01Bubbleで簡単なWebアプリを作ろう1.Bubbleでアプリを新規に作ろう。nocodelabスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。