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

コメントで「responsiveデザイン対応に伴って、変わっている」とご指摘があるように、記事の内容が古い状態です。 グループの作成 ワークフローの設定 おまけ機能 参考図書 グループの作成 動きが分かりやすいようにグループを作成します。 「Groupエレメン…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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