すべてのカテゴリ

廉清 生織のブログの部屋へようこそねぇ　あなたはこの世界の “ 不確か ” を　信じたことがありますか？目に見えるものだけが「真実」で触れられるものだけが「愛」なのでしょうか？たとえば空に浮かぶ　泡のような夢誰にも理解されなかった　想い根拠のない「きっと大丈夫」という　直感形にならなかった　祈りそれらはすべて儚くて　つかめなくて　すぐに消えてしまいそうだから人は　「信じること」を　諦めてしまうのかも　しれませんでもね・・泡のように　消えてしまうからこそその一瞬は　何よりも　美しいのです信じた　あなたの心だけにきらめくように咲く　ほんの小さな　“ 希望のしずく ”不確かでも　いいたとえ　笑われたって　いいあなたが　それを「信じたい」と　思うのならそれは　あなたの中の　真実だからBubbleの囁きは　問いかけてきます「それでも　あなたは　信じますか？」「不確かさの中に　答えがあることを　知っていますか？」と今　この瞬間　あなたの　心に浮かんだ“ たしかではないけれど　大切にしたい何か ”それこそがあ　なたを明るい光へ導く　囁きかも　しれないのです勇気を出して　一歩　ゆっくりでいいから　踏み出しましょう私が　優しく　見守っていますからね

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

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

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

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 での開発では対応が難しい、またはハードルが高い要件についてまとめます。1. 非常に複雑なドメインロジックやビジネスルールBubble は「ワークフロー」と呼ばれる機能で条件分岐やアクションを直感的に設定できますが、あまりに複雑なドメインロジックやビジネスルールを扱う場合には、設定項目が膨大になり管理が困難になる場合があります。具体的には、以下のようなケースが該当します。・何層にもわたるネストされた条件分岐・大量のステップを経る複雑な決定フロー・大規模な数値計算やアルゴリズムの実装これらを無理にワークフローで実装しようとすると、メンテナンス性が低下し、仕様変更が発生した際に大きな負担となり得ます。2. 高いパフォーマンス・大量トランザクションが求められるアプリBubble はホスティングやサーバー管理を意識しなくても利用できる手軽さが魅力ですが、従来のフルカスタム開発と比較するとパフォーマンス面で制約が出る可能性があります。例えば、以下のようなケースでは注意が必要です。・高トラフィック環境：短期間に数万～数十万のユーザーがアクセスする想定のサービス・大量データのリアルタイム処理：リアルタイムのストリーミングや高頻度の書き込み・読み込みが必要なアプリBubble でもスケーラブルなホスティング環境が提供

近年、ノーコードやローコードツールの需要が急速に高まっており、プログラミングの専門知識がなくても自分のアイデアを形にできる環境が整いつつあります。そんな中でも特に注目されているのが、Bubble というノーコードツールです。Bubble の主な特徴や使いどころについてわかりやすくご紹介します。1. ドラッグ＆ドロップで直感的に画面をデザインBubble では、あらかじめ用意された要素（テキスト、ボタン、入力フォームなど）をドラッグ＆ドロップで配置し、画面レイアウトを組み立てることができます。プログラミング言語でレイアウトを記述する必要がなく、デザイナーやエンジニアでなくても直感的にビジュアルを編集できるのが大きなメリットです。また、要素ごとに文字色や背景色、サイズ、配置などを細かく設定できるため、デザイナーがこだわるようなデザインの自由度も十分確保されています。2. ビジュアル開発 + “ワークフロー”でロジックを実装ノーコードツールの多くは、見た目のデザインは簡単に作れるものの、「細かい機能をどう実装するのか」が難しくなりがちです。しかし Bubble には、ワークフローと呼ばれる仕組みが用意されており、どのタイミングでどのような操作が行われたときにどんな動作をさせるかといった処理を、条件分岐やアクションといった概念で可視化しながら設定できます。たとえば、「ユーザーがボタンを押したらデータベースに保存し、別のページへリダイレクトする」といった、一連の処理フローをプログラミング不要で組み立てられるのが強みです。3. 柔軟なデータベース機能Bubble はフロントエンドだけでなく

あと少しで完成ですね！ 今回は、お客様にお得情報を告知しましょう!・お客様へのお得情報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なので横並びになります そこで”期間限定！"と"説明文

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ヶ月で終わり

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 のチェックをする

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

こんにちは、成田です。  「Webアプリを作りたいけど、プログラミングは難しい…」  そんな方に人気なのが、ノーコードツール「Bubble」です。Bubbleを使えば、コードを書かずに本格的なWebアプリを作成できます。  ただし、自由度が高い反面「思った通りに動かない」という失敗も起こりがちです。今回は、BubbleでWebアプリ開発を成功させるための3つのステップをご紹介します。ステップ①：アプリの「目的」と「ゴール」を明確にするまず大切なのは、「何を作りたいのか」を言語化することです。  たとえば：- 顧客情報を登録・検索できるシステムが欲しい  - 社内で日報を入力＆一覧表示できるツールを作りたい  - マッチングアプリのような構成にしたいこの段階で画面の流れやデータ構造を簡単に図にしてみると、後工程がスムーズになります。ステップ②：UIだけでなく「データベース設計」がカギBubbleは直感的なUI設計が強みですが、裏側の「データベース設計」こそ成功の鍵です。たとえば、  - 顧客ごとにメモやファイルを添付したい  - 管理者とユーザーで表示内容を変えたい  - 条件によって表示するボタンを変えたいこういった要件は、最初のデータ構造の作り方次第でラクにも苦労にもなります。  後から変更が大変なので、設計段階でしっかり作り込みましょう。ステップ③：プロトタイプ→改善の流れを前提に進めるBubbleは「完璧に作ってから公開」ではなく、「まず使ってもらって改善」するツールです。最初は最小構成（MVP）で作り、  → 実際のフィードバックを得て  → 改善と追加を繰り返すという

・画面サイズを決める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を作りましょう！

・ファーストビューを作るお客様が最初に見る部分です。工夫をして お客様の心をつかめるように作りましょう！ファーストビューはヘッダーの下に配置します。画像をアップロードする時は左側の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