絞り込み条件を変更する
検索条件を絞り込む
有料ブログの投稿方法はこちら

すべてのカテゴリ

11 件中 1 - 11 件表示
カバー画像

Bubble ARプラグイン SwiftXR ViewerでARを作ってみましょう!(初心者向け)part.2¦SwiftXRサイトで顔追跡

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
0
カバー画像

シニアから始めるbubble! TPを作りましょうPart 6.

最後にフッターを作りましょう!フッターの内容は色々ありますが今回は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 のチェックをする
0
カバー画像

シニアから始めるbubble ! TPを作りましょう Part 5.

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

シニアから始めるbubble!TPを作りましょう Part 4.

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
0
カバー画像

シニアから始めるbubble! TPを作りましょう Part 3.

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
0
カバー画像

シニアから始めるbubble!TPを作りましょう Part 2.

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

シニアから始めるbubble!TPを作りましょう Part 1.

・画面サイズを決める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
0
カバー画像

シニアから始めるbubble!TPを作りましょう!準備

・ノーコードツール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を作りましょう!
0
カバー画像

58歳でノーコードbubbleを学びました!

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ヶ月で終わり
0
カバー画像

「STUIDOでアコーディオン機能を試してみた!」

こんにちは!高橋です!今回はノーコードツール「STUDIO」でアコーディオン機能が実装できるというブログ記事を拝見しましたので、実際に出来るのか試してみました。ちなみに、STUDIOではアコーディオン機能の実装は、今現在は未対応となっています。ブログ記事は、株式会社gazさんが掲載している、「web制作あるあるな機能をSTUDIOで実装してみたシリーズ」アコーディオン機能というものです。内容を簡単に説明すると、①STUDIOにてアコーディオンの土台を作成 ②実際に動かす為に、Google Tag Managerとの連携する ③アコーディオン用のコード(JavaScript)をカスタムHTMLへ記述といった感じです。ここで、Google Tag Managerとの連携するために、STUDIOのBASICプラン以上の有料アカウントが必要になります。月払いで\1,280払いました・・・。(授業料という事で(´;ω;`)ウゥゥ)では、実際に作業してみました。ブログ記事を拝見する感じでは、作業量はそんなに多くありません。とりあえず書いてある通りにやってみました。・・・・・・・・・動きません。う~ん、何度見直してやり直しても上手くいきませんでした。STUDIOの公式SlackやTwitterで情報収集しましたが、同じように上手くいかない方が多くいるようです。このまま諦めようかと思いましたが、折角お金払ったので実装したいと思い、色々調べました。発見しました!STUDIOで公開して上手く動かないようであれば、キャッシュクリアが有効なようで、これをおこなってから動くようになりました。はい!こんな
0
カバー画像

ノーコードNOCODEによる【安い・早い・上手い】ホームページ開発を提案!

いま話題の “ノーコード” をご存じですか? 従来、ホームページを制作する場合、専門的な知識や技術を持ったプログラマーに依頼するのが普通でした。 専門家にお願いするため多くの費用や期間がかかりました。 “ノーコード” によるホームページ制作はその難しい部分である「コーディング」すなわちプログラミングをしないでホームページを作ってしまおうという手法のことです。 プログラミングという多くの費用や期間がかかっていた作業を省くことによって、リーズナブルな予算でしかも短期間でホームページを制作できるようになりました。 しかし最終的に出来上がったホームページが利用者であるお客様にとって「使いやすいものになっているかどうか」という点は、従来の手法で制作されたホームページであろうとノーコードで制作されたホームページであろうと変わりません。 したがって従来のホームページ制作のノウハウを持ちつつノーコードで省力化する、ということができる制作会社が今後魅力的な提案ができるホームページ制作会社ということになると思います。 当社の代表はホームページ制作と各企業のWebシステム開発などを多数経験し、きわめて高い技術力を保持しており、その指導の下ほかのスタッフも従来型のプログラミングによるホームページ制作・Webアプリ開発について十分可能な実力があります。 それらの知識や経験を駆使してお客様の負担を抑えた方法でのホームページ制作やWebサイト制作を全社を挙げて提案してゆきたいと考えています。 最終的な利用者であるお客様にとって 「ノーコードだけど安っぽくない」 「しっかり使いやすい・わかりやすい」 「魅力的
0
11 件中 1 - 11
有料ブログの投稿方法はこちら