Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ガチマナ会 vol.1
Search
Satoshi Gachi Fujimoto
February 20, 2024
Technology
0
230
ガチマナ会 vol.1
ノーコードでSNSをつくーる
Satoshi Gachi Fujimoto
February 20, 2024
Tweet
Share
More Decks by Satoshi Gachi Fujimoto
See All by Satoshi Gachi Fujimoto
バスあと何分ミニサイネージ
satoshirobatofujimoto
0
110
高専で制御を、大学でセンシングを学び、次は脳みそ
satoshirobatofujimoto
0
280
画像生成AIを使って勝負しよう
satoshirobatofujimoto
1
130
画像生成AIを使って勝負しよう
satoshirobatofujimoto
0
240
画像からプロンプトを考えて最も似ている画像を生成した人が勝ちのゲーム@AIミーティング
satoshirobatofujimoto
0
170
VPS研究者が語る”VPS概論”
satoshirobatofujimoto
0
420
画像からプロンプトを考えて最も似ている画像を生成した人が勝ちのゲーム
satoshirobatofujimoto
0
210
OpenAI 新機能まとめ(Function callingとAdd your data編)
satoshirobatofujimoto
0
270
PLATEAUを用いた熊本市中心市街地におけるバリアフリー情報の可視化
satoshirobatofujimoto
0
1.1k
Other Decks in Technology
See All in Technology
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
4.9k
UIテスト自動化サポート- Testbed for XCUIAutomation practice
notoroid
0
120
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
[TechNight #90-1] 本当に使える?ZDMの新機能を実践検証してみた
oracle4engineer
PRO
3
140
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
150
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
110
ローカルLLMでファインチューニング
knishioka
0
130
rubygem開発で鍛える設計力
joker1007
1
140
CI/CDとタスク共有で加速するVibe Coding
tnbe21
0
230
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
9.5k
Wasm元年
askua
0
110
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
150
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.3k
Designing for humans not robots
tammielis
253
25k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
KATA
mclloyd
29
14k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Code Review Best Practice
trishagee
68
18k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Optimizing for Happiness
mojombo
379
70k
Transcript
ガチマナ会 vol.1 ガチでマナぶ会 2024/02/20
ノーコードでSNSつくろう • https://funrepeat.com/bubble-tutorial/
Hello World!
• https://bubble.io/ アカウントを登録
アンケートに回答
Get startedをクリック
アプリ名を入力
デフォルトのフォントを選択
デフォルトのカラーを選択
Get started buildingをクリック
メニューバー
View -> Show gridにチェック
Visual elements -> Text D&D
テキストの編集
Previewをクリック
Visual Elements -> Button D&D
ボタンを押したらHello, World!を表示したい
This element is visible on page loadのチェックを外す
Click meボタンのAdd workflow
Buttonをクリックしたら、Hello, World!を表示したい
Show -> Element を Text Hello, World!にする
Hello, World! 完成
簡単なSNSアプリ
Input forms -> Multiline Input D&D
Visual Elements -> Button、レイアウトの調整 D&D
データベースを作成(Tweet)
Create a new field
Fieldの選択
Containers -> Repeating Group D&D
RepeatingGroup Tweet -> Appearanceの設定
Textを割り当てる D&D
Insert dynamic data -> Current cell’s Tweet’s tweet
「投稿する」ボタンでツイートしたい
「投稿する」ボタンでアクションを追加
Tweet内容を指定し、ツイートする
ツイートしたらリセット
完成
ヘッダーを作成
アプリのコピー(Ctrl+A -> Copy to another app)
Upgradeが必要
Freeは1アプリまで
ページについて
ヘッダーを作成
• zzz ヘッダーを作成
Responsive -> Reusable header Layoutの設定
ヘッダーのスタイルを作成
ヘッダーのスタイルを設定
ヘッダーのスタイルを設定
ヘッダーにアプリ名を設定
ヘッダーにアプリ名を設定
ヘッダーにアプリ名のスタイルを作成
ヘッダーにアプリ名のスタイルを設定
ヘッダーにタイムラインのリンクを追加 D&D
ヘッダーにタイムラインのリンクを追加
ヘッダーにタイムラインのリンクを追加
ヘッダーにタイムラインのリンクを追加
indexにヘッダーを追加
完成
疲れました
次回、GlideでSNSをつくーる