未来エンジニア養成所Blog

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

bubble

【Bubble/ノーコード】データベースに登録された画像を表示する

前回の記事で保存した画像データを表示する機能を作成します。 画像を表示するフィールドを作成する リンクの設定 新しいページの作成 ページに画像を表示させる リンククリック時の設定 参考図書 画像を表示するフィールドを作成する 画像を表示するフィー…

【Bubble/ノーコード】データベースに画像を保存する

完成イメージ フォームの作成 フィールドを作成 フィールドの設定 画像を保存するフィールドを作成 画像の表示をリセット 参考図書 完成イメージ 「画像のタイトルを入力」「画像をアップロード」して「保存ボタン」を押すと、それがデータベースに保存され…

【Bubble/ノーコード】スライドショーを設置する

スライドショーを設置する プラグインのインストール Slideshowの配置 プレビューで確認 参考図書 スライドショーを設置する プラグインの使い方を紹介しながら、スライドショーを作成していきます。 完成イメージは下記のようになります。 プラグインのイン…

【Bubble/ノーコード】出身地投票アプリを作ろう

出身地投票アプリを作ろう 今回は自分の出身地を入力して投票できるようなアプリを作成してみます。 完成イメージはこんな感じです。 都道府県を入力するフォーム 入力されたデータをデータベースに登録するボタン データベースに登録された、都道府県名を呼…

【Bubble/ノーコード】サインアップ・ログイン・ログアウト機能を作る

今回は「サインアップ」「ログイン」「ログアウト」の機能を作る方法を解説します。 完成イメージはこのようになります。 実施する内容は 「メールアドレス」と「パスワード」をユーザーが入力するフォーム 「サインアップ」ボタン、「ログイン」ボタンの設…

【Bubble/ノーコード】データベースの使い方 Part2

データベースに登録されている情報を表示する 今回はデータベースに登録されている情報を呼び出して、リスト表示する方法について解説します。 Repeating Groupを使って、データベースに登録されている「名前」と「メールアドレス」を表示させます。 まずはR…

【Bubble/ノーコード】データベースの使い方 Part1

Sing up フォームの作成 データベースの準備 ワークフローの設定 ユーザー登録 データベースの確認 参考図書 Sing up フォームの作成 今回はサインアップのアプリケーションを作成しながら、データベースの使い方を解説します。 まずはデータベースに登録す…

【Bubble/ノーコード】ユーザー情報をデータベースに保存

画面の準備 「名前」「メールアドレス」といったユーザーの情報を入力してもらい、その情報をデータベースへ保存する方法です。 イメージとしてはサインアップですね。 まずは次のような画面を準備します。 一番上にはタイトルとなる「Textエレメント」を配…

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

クリックすると別のページに移動する クリックすると別のページに移動するワークフローを作ってみましょう。 まずは下記のように「Textエレメント」を作成します。 文字、形、色などは何でもOKです。 次に移動先のページを作ります。 画面左上にある「Page …

【Bubble/ノーコード】ボタンを押した時のアクション

ボタンを押した時に指定のアクションをする ボタンを押した時に指定したアクションが起きるようにしてみます。 まずは「Textエレメント」と「Buttonエレメント」を下記のように配置します。 次に、ボタンが押されたら「Textエレメント」が消えるようにワーク…

【bubble/ノーコード】エレメントを確認してみよう Part4

前回までは「Design」タブの中にある「Visual elements」と「Containers」、「Input forms」について紹介しました。 phoeducation.work phoeducation.work phoeducation.work 今回は「Elements tree」について紹介します。 ここでは各エレメントの親子関係な…

【bubble/ノーコード】エレメントを確認してみよう Part3

前回までは「Design」タブの中にある「Visual elements」と「Containers」について紹介しました。 phoeducation.work phoeducation.work 今回は「Input forms」について紹介します。 ユーザーに何か入力してもらう、ユーザーに何かを選択してもらうといった…

【bubble/ノーコード】エレメントを確認してみよう Part2

前回は「Design」タブの中にある「Visual elements」について紹介しました。 phoeducation.work 今回は「Containers」について紹介します。 「Containers」という名前の通り、入れ物という括りのエレメントです。 Group 様々エレメントをまとめてデザイン等…

【bubble/ノーコード】エレメントを確認してみよう Part1

前回はbubbleでアプリを作成するための編集ページを表示するところまで解説しました。 phoeducation.work 今回は編集ページでどのようなことができるのかを解説します。 まず、画面左側を見ると、下記のようにいくつかのタブが並んでいます。 その中から、ま…

【bubble/ノーコード】アプリケーション開発をはじめてみよう

アプケーション開発をはじめてみよう 前回bubbleのアカウントを作成しました。 phoeducation.work そのアカウントでログインします。 そうすると、Welcomeページが表示され、チュートリアルの一覧が表示されます。 ここでチュートリアルを順番にやってもらっ…

【bubble/ノーコード】bubbleのはじめかた

bubbleをはじめてみよう 「bubbleのはじめかた」というたいそうなタイトルをつけましたが、まったく難しくないので安心してください。 そもそも「bubble」とはなにかというと、ブラウザ上の専用画面内でマウスのドラッグ&ドロップ操作をしながらWebアプリケ…