未来エンジニア養成所Blog

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

bubble

【Bubble/ノーコード】ギャラリーの写真を拡大してスライドショーを作る

データベースに写真を保存する デザインを設定する ワークフローの設定 参考図書 データベースに写真を保存する まずはデータベースに写真を保存します。 データベースタブに行き、新しいタイプを「ギャラリー」とします。 次にギャラリータイプの中に、フィ…

【Bubble/ノーコード】折りたたみ可能なサブメニューを作る

グループの作成 ワークフローの設定 おまけ機能 参考図書 グループの作成 動きが分かりやすいようにグループを作成します。 「Groupエレメント」を配置し、スタイルを変更しましょう。 「Backgroud style」を「Flat color」に、「Color」を「#091747」にして…

【Bubble/ノーコード】カレンダープラグインを使ってみる

あるイベントのスタッフ(ボランディア)応募フォーマットを作成してみます。 カレンダープラグインのインストール データベースの作成 カレンダーの作成 プレビューで確認 応募フォーマットの作成 データベースの作成2 ワークフローの作成 プレビューで確認…

【Bubble/ノーコード】ダブルクリックの機能を付ける

デザインの設定 ワークフローの作成 アラートの表示 プレビューで確認 参考図書 デザインの設定 1回クリックしただけでは何も反応せず、2回目のクリックでアラートが表示されるようなボタンを作成します。 まずはボタンを配置します。 ボタンを配置して、ボ…

【Bubble/ノーコード】スライドショーをポップアップ表示する

データベースに画像をアップロードする スライドショーの設置 ポップアップの作成 ボタンの設置 ワークフローの作成 ポップアップにスライドショーを表示させる プレビュー 参考図書 データベースに画像をアップロードする まずは「Data」タブを選択します。…

【Bubble/ノーコード】データをチャート表示する

入力フォームの作成 ワークフローの作成 プラグインのインストール 「Line/Bar Chart」エレメントの配置 プレビュー 参考図書 今回は、APIを用いてデータをチャート表示させてみます。 完成イメージは下記のようになります。 入力フォームの「ラベル」に入力…

【Bubble/ノーコード】外部APIを使って「iTunes」の曲を表示させる

完成イメージ 入力フォームの作成 プラグインのインストール APIの設定 iTunesへのリンク作成 完成 参考図書 完成イメージ 今回は外部APIを使って「iTunes」の曲を表示させてみます。 完成イメージは次のようになります。 検索窓にタイトルを入力すると検索…

【Bubble/ノーコード】「Alert(アラート)」の使い方

完成イメージ フォームの作成 ワークフローの作成 完成 完成イメージ 「Alert(アラート)」の使い方と、ワークフローで条件を追加する方法を解説します。 完成イメージは次のようになります。 何か文字を入力して、ボタンをクリックすると、「アラート」と…

【Bubble/ノーコード】マウスホバーでテキストの色を変える

「Conditional」の使い方 参考図書 今回は「Conditional」を使って、ユーザーがマウスホバーした時に、テキストの色を変える方法を解説します。 「Conditional」の使い方 「Text」エレメントを使います。 テキスト名を「Hover me!」としておきます。 また、…

【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アプリケ…