すべてのカテゴリ

完成イメージ動画今回のログインしている、していないで表示を変える方法を学ぶことにより可能になる実装を45秒で確認できます。はじめにログインしているか、していないかにより処理を分けたいケースというのは開発をするうえで出てくることが多いです。Bubbleでもそのようなログイン判定の機能があるので、画面とワークフローでそれぞれやり方を紹介します。画面：ログインしている、していないで表示を変える今回はボタンの名前をログインしている場合は「既にログインしています」に切り替えるための実装をします。ボタンのConditionalを開いて、Current Userを選択します。そうするとその中に is logged inという項目があるためこちらを選択します。Textに「既にログインしています」という文言を設定ワークフロー：ログインしている、していないで処理を変える実装の例として、ログイン後のユーザーのみ表示できる画面を作ります。（ログインしていない場合にはログイン画面に遷移させます）ワークフローの枠をクリックして User is logged out を選択します。 ワークフローの中でログイン画面への遷移を設定します。これでログインしないと対象のページが表示ができなくなりました。

Part.2ではSwiftXRサイトで顔追跡(Face Tracking)の設定と王冠(3Dモデル)をアップロードしました。今回は王冠(3Dモデル)を頭に付ける調整とBubbleの画面でAR体験ができるようにしましょう！完成画像↓1.SwiftXRサイトで王冠を頭に付ける調整をしましょう！前回はSwiftXRサイトで王冠(3Dモデル)をアップロードするまでをしましたね！今回は王冠を頭に付ける調整をしましょう！※Part.2の続きです！今回からご覧の方はPart.2をご覧ください。1-1.王冠を頭に付ける設定”顔追跡(Face Tracking)”をクリックしましょう！【画像_1】顔追跡(Face Tracking)をクリックすると下が開きます。顔上の3Dオブジェクトを調整する(Adjust 3D Object on Face)をクリック【画像_2】1-2.顔上の3Dオブジェクト(王冠)を調整します顔上の3Dオブジェクトを調整する(Adjust 3D Object on Face)をクリックをすると【画像_3】になります中央画像の黒い物が王冠です。中央画像の右側にある上からサイズ・移動・回転で王冠を頭に付ける調整をします。【画像_3】①最初に一番上のサイズで王冠を顔(白い顔)に合うくらいのサイズにします【画像4】②王冠の飾りが顔側になっていますので回転Yで外側にします【画像5】③顔(白い顔)の向きを変えるにはマウスを押さえながら動かします。　顔正面に向けて位置Yで上下に動かしてイイ位置にしてください！【画像5】④顔(白い顔)を横にすると王冠との間が空いています。これを調整しましょ

Part.1でSwiftXRとBubbleの準備を完了しました。今回は顔追跡の設定と3Dモデル(王冠)をアップロードしましょう！完成画像↓1.Bubble画面作成今回はAR画面作成だけのためページはindexでも大丈夫です！1-1．画面作成今回はMobileサイズにしますindex画面をクリックして黒の画面を出しますLayoutクリック→Container layout:Colum(縦並び)                         Preset page width:Mobile                         Default builder width:380px                         Min width:380px                         Min height:600px　に設定してください1-2.SwiftXR Viewerをindex画面に設定左側のVisual ElementsのSwiftXR Viewerをドラッグ＆ドロップで配置index画面中に持ってくる！index画面の周りが赤くなったら画面の中に入っています。↓画像SwiftXR Viewer Aの黒画面 Layoutをクリック！Horizontal alliegnment の真ん中にします(赤の→)Make this element fixed-width にチェック！width:380pxMake this element fixed-heightHeight:400pxこれでBubbleのサイズ設定が完成しました。2.SwiftX

Nocode Bubbleを始めたばかりの方でもARプラグインSwiftXR Viewerなら簡単にBubbleの画面でARを出現できます！SwiftXR Viewerプラグインは無料です。SwiftXR Viewerのサイトも無料の範囲で作成します。今回は顔追跡で王冠を頭に付ける前にSwiftXRとBubbleの準備しましょう！完成画像↓1.SwiftXR (3D AR VR) Viewerプラグイン 3D/AR/VR ビュー(公開URL)をBubbleに埋め込むことで、Web サイトのユーザー エクスペリエンスを向上させます。SwiftXRのアプリを使用すると3D、AR、VR の製品ビューを簡単に統合して没入型のブラウジング エクスペリエンスを作成できます。詳細はSwiftXR ( 3D AR VR ) Viewer Plugin - Bubbleをご覧ください。1-1．SwiftXRにサインアップとAPIキー作成SwiftXR: Homeからサイトで”無料から始める”(Get Started for Free)ボタンでサインアップをしましょう！名前、メールアドレスなどを入力して”Sign up"ボタンをクリックします。上記の画面の左上(赤い→)をクリックしてアカウント画面に移動する新しいAPIキーを作成する(Create new API Key)ボタンをクリックして作成します。これでSwiftXRの準備は完了しました。次はBubbleのプラグインを用意しましょう！1-2.Bubbleの準備(APP作成とプラグインのインストール)Bubbleのサインアップは前回の”シニアか

ノーコードツールのBubbleを使用して副業を始める方法はいくつかあります。Bubbleは、プログラミングスキルがなくてもアプリケーションを作成できるプラットフォームであるため、多くの創造的なビジネスアイデアを追求することが可能です。以下に、Bubbleを利用した副業の始め方をいくつか紹介します。 １．アプリケーションの開発と販売自分自身のビジネスアイデアに基づいたウェブアプリケーションやモバイルアプリケーションを開発することができます。例えば、特定のニッチ市場向けのオンラインストア、イベント管理、予約システム、教育プラットフォームなどを作成することが可能です。開発したアプリケーションは、エンドユーザーにサブスクリプションや一回限りの支払いによって提供することができます。 ２．フリーランスプロジェクトBubbleの専門知識を利用して、他の企業や個人のプロジェクトにフリーランスとして参加します。多くの企業は、専門的な開発者を雇用する代わりに、短期間で特定のプロジェクトを実行できるフリーランサーを求めています。 ３．テンプレートやプラグインの販売Bubbleユーザー向けのテンプレートやプラグインを作成し、Bubbleのマーケットプレイスや自身のウェブサイトで販売します。高品質なテンプレートやプラグインは、他のユーザーにとって価値が高いため、これらを販売することで収益を得ることができます。 ４．教育コースやワークショップの提供Bubbleの使用方法を教えるオンラインコースやワークショップを開催します。あなたの知識を他の人々と共有することで、教育分野での副業として収益を得ることができま

独立・起業を考えている方へ、ノーコードツール「Bubble」を知っていますか？独立・起業を考える上で強力な武器となるツールとして「Bubble」をご紹介します。Bubbleとは「Bubble」とは、ノーコード開発プラットフォームのひとつで、ユーザーがコードを書かずにウェブアプリケーションを構築することができるツールです。独立・起業を考えている方がBubbleを習得する7つのメリット１．手軽にスタート：資金面での大きなメリット ビジネスの立ち上げには多大な初期投資が必要とされることが多い。特に、伝統的なソフトウェア開発はその代表例です。Bubbleでは、コストを大きく抑えながらアイディアを具現化することが可能です。これにより、資金調達のプレッシャーが軽減され、他のビジネスエリア、例えばマーケティングや営業活動に投資することができます。この初動の軽さは、起業家の一歩を踏み出す大きな後押しとなります。 ２．アイディアを即、形に：革新的なスピード感 新しいビジネスのアイディアは、速さが求められます。Bubbleを使用すると、短期間でのプロトタイピングが可能となり、アイディアの有効性をすぐに検証することができます。市場の変化や顧客のニーズに迅速に反応し、適応することができるため、競争力を保ち続けることができます。 ３．誰でもデベロッパーに：テクノロジーへのアクセス性 多くの起業家が技術的な背景を持っていない中、Bubbleは技術の壁を取り払います。高度なコーディングスキルなしに、自社のウェブサイトやアプリの制御が可能になります。外部の専門家やエージェンシーに頼らず、自分の手で製品の改善や

『Bubble』はWebアプリケーションの開発プラットフォームで、コーディングスキルがなくてもユーザーがWebアプリやモバイルアプリをビジュアルにデザインし、機能を組み込むことができるツールです。特に学生の方々にとって、将来のキャリア形成や創造的なアイディアの具体化に非常に役立つと言えます。学生のためのBubbleを使用したステップアップ方法を以下に示します。 1. 基本を理解する ・Bubbleの公式チュートリアルやガイドを利用して、基本的な操作や機能を　　理解する。・データベースの概念や、ページ間のナビゲーション、入力フォームの作成など、基本的なWebアプリの要素を学ぶ。 2. 小さなプロジェクトから始める ・学校の課題、趣味、部活動などをテーマにした簡単なWebアプリを作成してみる。 例: 学生のための勉強スケジュール管理アプリ、部活の情報共有プラットフォームなど。 3. フィードバックを得る ・実際に作成したアプリを友人や先生に使ってもらい、フィードバックを集める。 ・問題点や改善点を見つけ、アップデートしていくことで、アプリの質を高めていく。 4. Bubbleのコミュニティに参加 ・Bubbleのフォーラムやコミュニティに参加して、質問をしたり、他のユーザーの作品を見てインスピレーションを得る。 ・経験者からのアドバイスや新しいテクニックを学ぶことができる。 5. 実践的なスキルを習得 ・Bubbleのプラグインを使って、より高度な機能を追加する。 ・APIの利用や外部データの連携など、より実践的なスキルを習得して、プロフェッショナルなアプリを作成する。 6. ポー

主婦の方、ちょっとした副業を考えたことはありますか？Bubbleというツールを使えば、あなたも簡単にビジネスを始められますよ！主婦の方々が、家事や子育ての合間にビジネスを始める利点はたくさんあります。なぜ、Bubbleがおすすめなのか、簡単にご紹介します。 １．いつでもどこでもOK 家事や子どもの世話で忙しいあなたでも、Bubbleなら自分のペースで、自宅で気軽に始められます。 ２．難しい技術は不要 プログラムの知識がなくても大丈夫！Bubbleで簡単にアプリやウェブサイトが作れます。新しいことを学びながら、あなたのビジネスを育てていきましょう。 ３．始めるのにたくさんのお金は不要 高い初期投資は不要です。Bubbleはお財布にやさしく、リスクなくスタートできるのが魅力です。 ４．あなたのアイディアを形に お料理や手作りグッズ、予約サービスやコミュニティの場を作るなど、Bubbleであなたの夢やアイディアを実現しませんか？ ５．わからないことはサポートにお任せ Bubbleには初心者の方向けの教材やサポートが充実しています。一人で悩むことなく、楽しく学べます。 主婦の方が副業を持つことで、家計にプラスになるだけでなく、自分自身の成長や楽しみも増えますよ。 忙しい日常の中でも、Bubbleというツールを使えば、新しい世界が広がります。あなたも挑戦してみませんか？Bubbleの学習に行き詰ったら、お気軽にご相談ください！

ノーコードプラットフォームのBubbleは、コーディングスキルがない個人やビジネスオーナーがウェブアプリケーションを作成できるように設計されています。しかし、この手のノーコードプラットフォームにはツールの制約による限界があり、特に複雑または特定の技術要件を持つプロジェクトには適していない場合があります。以下に、Bubbleでは開発が難しいまたは不可能な要件を示します。１．複雑なデータ処理とトランザクション複雑なデータ操作や、多層的なトランザクション処理、リアルタイムでの高速処理が必要なアプリケーションには向いていません。 ２．コードを組み合わせた開発BubbleはJavaScriptや他のプログラミング言語を直接利用する能力に限界があります。高度にカスタマイズされたコーディング、特定のライブラリの統合、またはカスタムSDKの使用が必要な場合、制限に直面することがあります。 ３．高度なセキュリティ要件もしアプリケーションが高度なセキュリティ対策を必要とする場合（例：金融業界や医療情報のような個人情報の取り扱い）、Bubbleの標準機能では要件を満たせない可能性があります。 ４．3Dグラフィックスや高度なデザインBubbleは、3Dレンダリングや高度なゲームエンジン、高度で複雑なデザインなどをサポートするための機能を持っていません。 ネイティブアプリケーションの開発: Bubbleはウェブアプリケーションの開発に特化しています。そのため、iOSやAndroidなどのネイティブアプリケーションの直接的な開発はサポートされていません。 ５．大規模なエンタープライズソリューション大規模な

Bubbleのノーコードプラットフォームは、その使いやすさと柔軟性のため、さまざまなタイプのウェブアプリケーションを作成するのに適しています。ユーザーは、複雑なコーディングスキルがなくても、多くの異なる機能とインタラクティブな要素を持つ製品を構築できます。以下は、Bubbleで作成可能なサービスの一例です。 １．マーケットプレイスユーザーが商品やサービスをリストアップし、購入または交換できるオンラインマーケットプレイス。例：メルカリ２．ソーシャルネットワーキングプラットフォームユーザーがプロフィールを作成し、他のユーザーと交流やコンテンツの共有を行えるプラットフォーム。例：Facebook、X(旧Twitter)、Instagram、LinkedIn、３．ブログやコンテンツ管理システム (CMS)ユーザーが記事を投稿、編集、公開できるプラットフォーム。例：WordPress４．Eコマースプラットフォームオンラインで商品を販売するためのウェブサイトやプラットフォーム。例：amazon、楽天５．予約や予定管理アプリサービスの予約やスケジュール管理を行えるアプリ。これにはレストランの予約システムや医療アポイントメントシステムが含まれます。 例：食べログ６．教育プラットフォームオンラインコースや学習管理システム（LMS）を提供するプラットフォーム。例：Udemy７．パーソナルファイナンスアプリ予算作成や支出追跡のような個人の財務を管理するアプリ。 例：マネーフォワード８．プロジェクト管理ツールタスクの割り当て、プロジェクトの進捗追跡、コラボレーションツールを含むプラットフォーム。例：T

近年、ノーコードツールの普及によりアプリケーション開発は一般の人々にも浸透し、プログラミングのスキルがない人でも自分のアイデアを実現できるようになりつつあります。その中でも、Bubbleは特に注目を集めているノーコードツールの一つです。ここではBubbleの特徴を5つ紹介します。 1. 直感的なビジュアル開発Bubbleは直感的でビジュアルな開発環境を提供します。プログラミングのコードを書かずに、ドラッグ＆ドロップやクリックで要素を配置し、アプリケーションをデザインできます。これは、プログラミング経験のない人にとっても開発が楽しくなり、モチベーションの維持にも繋がります。 2. 迅速なプロトタイピングデータベースの設計、画面のカスタマイズ、ワークフローの設定が簡単で、アイディアのプロトタイプを簡単かつ迅速に作成することができます。3. カスタマイズ性 Bubbleはデータベースモデルからワークフローまで、ほぼすべてを調整できます。ノーコードツール特有の、ツールによる制約でのできないことが少ないツールとなります。 4. サードパーティサービスとの連携Bubbleは多くのサードパーティサービスやAPIとシームレスに統合できます。オンライン決済、ソーシャルメディアとの連携、地図の埋め込み、メール通知など、さまざまな拡張機能を追加できます。 5. コスト効率 Bubbleはプロのエンジニアを雇わずにアプリケーションを開発できるため、開発コストを大幅に削減できます。これは特にスタートアップや中小企業にとって魅力的です。 Bubbleはプログラミング未経験者にとって、かなり効率的にアプリケ

Is your beloved leather sofa looking a bit worse for wear, with unsightly scratches marring its once flawless surface? Don't despair! In this comprehensive guide, we'll walk you through the process of fixing those pesky scratches and restoring your leather sofa to its former glory. Whether you're dealing with minor scuffs or deep gouges, Royal Family are got you covered with practical tips and tricks. So, let's dive in and learn how to fix scratches on a leather sofa!Assessing the Damage: Identifying Scratch Severity Before we delve into the solutions, it's crucial to assess the severity of the scratches on your leather sofa. Understanding the depth and extent of the damage will help you cho

最後にフッターを作りましょう！フッターの内容は色々ありますが今回はSNSのロゴから移動する設定をします。・Groupフッターを作るContainersにあるGroupをドラッグ＆ドロップでGroup理念の下に配置します。Groupフッターとします。Layout  Container layout→Row            Horizontal alignment左から2番目をクリック　　　　Min width 1200px            Make this element fixed-width のチェックを外す　　　　Min height 60px　　　　Make this element fixed-height のチェックを外す            Fit height to content にチェックを入れるAppearance  Background style→Flat color                   Color  #FFFFFF                   Border style-all borders→solid  width 1                   Color  #082747出来ましたか？次はSNSのロゴをフッターに作ります。・SNSのロゴを作る1.SNSのロゴ1個を作るGroup理念の中にVisual elementsにあるIcon をドラッグ＆ドロップで配置します。Layout  Width 40px            Make this element fixed-width のチェックをする

あと少しで完成ですね！ 今回は、お客様にお得情報を告知しましょう!・お客様へのお得情報1.Groupお得情報を配置します。何をするか分かりますか？ContainersにあるGroupをドラッグ＆ドロップでGroup理念の下に配置します。Groupお得情報 とします。Layout  Container layout→Row(横並び)            Horizontal alignment 左から2番目をクリック　　　　Min width 300px　Max width 100%　　　　Min height 150px            Fit height to contentにチェックAppearance　Background style→Flat color                    Color #082747・Groupお得情報の中に文字を入力1.文字を配置Visual elementsにあるTextをドラッグ＆ドロップでGroupお得情報の中に置いてくださいAppearance  "期間限定！”を入力    　　　　　　 文字種類 Arial  文字サイズ 36px(400)  左側  B                   Color #FFFFFF　　　　　    "説明文"を入力　　　　　　 文字種類 Arial 文字サイズ 18px(400)  左側 B                    Color #FFFFFF"説明文”を”期間限定！"の下にします。Groupお得情報はRowなので横並びになります そこで”期間限定！"と"説明文

Part 3.ではコンテンツを作りました。今回は、店の理念を作ります。その前にコンテンツの製品名を変更するには、設定を変える必要があります。・Part 3.コンテンツ製品の文字を変更しました。製品を枕・マットレス・羽毛布団に変更したら設定も変更します。マットレスと羽毛布団は文字数が増えると2段になります。Text マットレス・羽毛布団とGroup アイコン・製品のLayout  Make this element fixed-widthのチェックを外す            Fit width to contentにチェックをしてください※ボタン”詳細はこちら”をクリックするとそれぞれの製品の詳細ページへ移動　する設定は今回はしません・店の理念TPには理念以外に他社との比較やサービスなどを表示しますが今回は理念にします。↓完成画像1.Group 店の理念を作ります今までのようにGroupの中にGroupを配置するのでは無くGroupは1つにします。左側のContainers Groupをドラッグ＆ドロップでコンテンツの下に 配置します。これをGroup 理念とします。Layout  Min width 300px            Make this element fixed-widthのチェックを外す            Min height 250px            Make this element fixed-heightのチェックを外す            Fit height to contentにチェック            Horizonta

Part 2. でファーストビュウまで作りました。今回は、どんな物を扱っているのかを伝えるために3種類の製品を表示します。・コンテンツグループを作りましょう #画像 1画像のように作りましょう！※bubbleを始めた時の作品です。見苦しい点もありますが例として　見てください1. コンテンツグループのサイズ・レイアウトファーストビューの下に左側のContainersにあるGroupをドラッグ＆ドロップで置きます。Container layout→Row(横並び)Horizontal alignment→中央Min width 1200px Make this element fixed-widthのチェックを外す Min height 330pxMake this element fixed-heightのチェックを外すFit height to contentにチェックAppearance  Background style→Flat color                    Color→#FFFFFFこのGroupをGroup製品とします。・Group製品の中に製品の種類を作る1.製品の種類のGroupを作る左側のContainars Groupをドラッグ＆ドロップでGoogle製品のなかに置きます。Container layout→Column(縦並び)Vertical alignment→左から2番目(Group製品の縦中央にします)Width 300pxMake this element fixed-widthにチェックMin height 270px今は Gr

・ファーストビューを作るお客様が最初に見る部分です。工夫をして お客様の心をつかめるように作りましょう！ファーストビューはヘッダーの下に配置します。画像をアップロードする時は左側のVisual elementsよりImageとContainersのGroupでできます。今回はGroupを使います。Container layoutはColumnHorizontal alignmentは中央をクリックサイズはMin width 1200px Min Height 600pxとします。Make this element fized-widthのチェックを外してくださいFit height to contentにチェックをしてくださいAppearance→Background styleをImageにしてStatic Imageから画像をアップロードします。ファーストビューの画像上にGroupを置いて帯のようにします。Groupをファーストビュー画像の上に置きます。Static ImageはColumnHorizontal alignmentは中央をクリックサイズはMin width 1200px Min Height 130px Make this element fized-widthのチェックを外してくださいFit height to contentにチェックをしてくださいAppearance→Background styleをFlat color #FFFFFF 60%にすることで透けて見えます。Group帯を画像の中央にするにはGroupファーストビューLayoutのCont

・画面サイズを決めるbubbleはレスポンシブでPC.タブレット.スマホの対応ができます。今回はPC版をつくりましょう！準備編で開いた画面にある灰色と白のラインをGrid&borders(画面上)で消すことと幅を調整できます。初めはあった方がやりやすいのでこのまま使います。画面をクリックすると黒い部分の「Propety area」(プロパティーエリア)が表示されます。左上にページ名を確認して画面サイズを入力します。Container layoutをColumn(縦)  Presee page widthをFull widthに設定Layoutのwidth(幅)foy Ul builder 1200px Min Height(高さ)3146pxを入力します。これで画面サイズの設定ができました。  ・ヘッダーを作る TPの構成は上からヘッダー・ファーストビュー・コンテンツ(製品)理念・フッターとします。一番上のヘッダーから作りましょう！1.ヘッダーの本体を作る左側ContainersのGroupをドラッグ＆ドロップで一番上に置いてくださいLayout→Container layoutをRow              width1200px  Min Height60px             Make this element fixed-widthの             チェックを外す　　       Fit height to contentに             チェックを入れるAppearance→Style AccributeのDatach style

・ノーコードツールbubbleを始めましょう！プログラミングの知識がなくてもWebアプリ開発ができるツールです。コードをかかないでドラック＆ドロップでできます。私が学んだ順にお伝えします一緒にやってみましょう！今回はTPを作る前のbubbleの登録をします。・アカウント登録1.アカウントを作成しましょう画面にある【Get started for free】をクリック2.メールアドレス.パスワード登録Googleアカウントまたは、メールアドレス＆パスワードを設定して【Get started】をクリック3.プライバシーポリシーに同意しますプライバシーポリシーが表示されるので【I agree Bubble’s terms・・・】　　　 　　 をクリックして同意します。4.アンケートに答える利用目的に関するアンケートが表示されます。目的に合った回答を選択 しましょう。 こちらはスキップすることもできます。 スキップする場合は左下の「Next」をクリックします。 5.エディター画面から開始全ての入力が完了すると、エディタ画面から早速アプリ開発を促されます。・チュートリアルに挑戦してみましょう！お疲れ様です。ドラッグ＆ドロップに慣れましたか？Part 1からTPを作りましょう！

2021年6月にProgateを始めたのがbubbleと出会うきっかけでした。まさか2年後に人生が変わるとは思いもしませんでした。販売職20年の私がbubbleを学習してフリーランスになるまでの奇跡を伝えます。・bubbleとの出会い2020年販売職をしていた時にコロナウイルスが流行！2月に横浜港に寄港したクルーズ船にコロナウイルス感染者があり乗っていた方のインタビューの報道で「アプリで友人と連絡をしています」の言葉から”アプリを自分で作れるの？”と疑問をもちネットで検索をしたらプログラミングで作れることが分かりました。プログラミング学習と検索したらProgateで学習できると分かりProgateで学習するために仕事の日数を減らして2021年6月から学習を始めました。プログラミングで何ができるかも知らないで始めてみるとホームページのTPができた時は感動しました。Progateはカリキュラム終了する毎にSNSに投稿するシステムになってい為2ヶ月学習した時にSNSのDMで”アプリを作るのはbubbleのほうが早いからbubbleを学習しませんか？”のお誘いに心を奪われて説明を聞いてbubbleのオンラインスクールで1ヶ月学びました。・ノーコードbubbleの厳しい学習bubbleの説明では”プログラミングと違いコードを書かないでドラッグ＆ドロップで出来ます”の言葉から簡単！と思っていましたが頭が痛くなるくらい考える難易度が高いものでした。またbubbleは英語表記！最終学歴から40年近い私には辛い学習の日々でした。・2度目のbubbleスクールでの学習最初のスクールは1ヶ月で終わり