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
270
0
Share
ガチマナ会 vol.1
ノーコードでSNSをつくーる
Satoshi Gachi Fujimoto
February 20, 2024
More Decks by Satoshi Gachi Fujimoto
See All by Satoshi Gachi Fujimoto
忘年会LT(2025)
satoshirobatofujimoto
0
56
バスあと何分ミニサイネージ
satoshirobatofujimoto
0
140
高専で制御を、大学でセンシングを学び、次は脳みそ
satoshirobatofujimoto
0
330
画像生成AIを使って勝負しよう
satoshirobatofujimoto
1
170
画像生成AIを使って勝負しよう
satoshirobatofujimoto
0
320
画像からプロンプトを考えて最も似ている画像を生成した人が勝ちのゲーム@AIミーティング
satoshirobatofujimoto
0
220
VPS研究者が語る”VPS概論”
satoshirobatofujimoto
0
470
画像からプロンプトを考えて最も似ている画像を生成した人が勝ちのゲーム
satoshirobatofujimoto
0
250
OpenAI 新機能まとめ(Function callingとAdd your data編)
satoshirobatofujimoto
0
320
Other Decks in Technology
See All in Technology
The Bag-of-Documents Model for Query Understanding and Retrieval
dtunkelang
0
140
「強制アップデート」か「チームの自律」か?エンタープライズが辿り着いたプラットフォームのハイブリッド運用/cloudnative-kaigi-hybrid-platform-operations
mhrtech
0
200
既存プロダクトQAから新規プロダクトQAへ
ryotakahashi
0
140
おいらのAWSアップデートの追い方〜Slack×AgentCore〜
yakumo
1
110
Claude Code で使える DuckDB Skills を試してみた / DuckDB Skills and Claude Code
masahirokawahara
1
540
LookerとADKで作る社内AIエージェント
chanyou0311
0
240
2026年春のAgentCoreアプデ 細かいやつ全部まとめ
minorun365
4
240
バイブコーディング、仕様駆動、その先へ - 「不確実性に対する検査‧適応のサイクル」を設計する
littlehands
1
520
AI全盛の今だからこそ、あえてもう一度振り返るAPIの基礎
smt7174
3
110
エンタープライズの厳格な制約を開発者に意識させない:クラウドネイティブ開発基盤設計/cloudnative-kaigi-golden-path
mhrtech
0
440
Swift Sequence の便利 API 再発見
treastrain
1
290
Agent Skillsで実現する記憶領域の運用とその後
yamadashy
2
1.9k
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
55
8.1k
Side Projects
sachag
455
43k
Automating Front-end Workflow
addyosmani
1370
200k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.4k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.4k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
550
The SEO Collaboration Effect
kristinabergwall1
1
450
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2.2k
The Cost Of JavaScript in 2023
addyosmani
55
9.9k
A Soul's Torment
seathinner
6
2.8k
The Language of Interfaces
destraynor
162
26k
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をつくーる