Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
250
ガチマナ会 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
120
高専で制御を、大学でセンシングを学び、次は脳みそ
satoshirobatofujimoto
0
300
画像生成AIを使って勝負しよう
satoshirobatofujimoto
1
140
画像生成AIを使って勝負しよう
satoshirobatofujimoto
0
280
画像からプロンプトを考えて最も似ている画像を生成した人が勝ちのゲーム@AIミーティング
satoshirobatofujimoto
0
190
VPS研究者が語る”VPS概論”
satoshirobatofujimoto
0
440
画像からプロンプトを考えて最も似ている画像を生成した人が勝ちのゲーム
satoshirobatofujimoto
0
230
OpenAI 新機能まとめ(Function callingとAdd your data編)
satoshirobatofujimoto
0
290
PLATEAUを用いた熊本市中心市街地におけるバリアフリー情報の可視化
satoshirobatofujimoto
0
1.1k
Other Decks in Technology
See All in Technology
バグハンター視点によるサプライチェーンの脆弱性
scgajge12
2
510
Playwrightのソースコードに見る、自動テストを自動で書く技術
yusukeiwaki
8
2.7k
その設計、 本当に価値を生んでますか?
shimomura
3
190
freeeにおけるファンクションを超えた一気通貫でのAI活用
jaxx2104
3
800
21st ACRi Webinar - AMD Presentation Slide (Nao Sumikawa)
nao_sumikawa
0
200
pmconf2025 - データを活用し「価値」へ繋げる
glorypulse
0
460
事業部のプロジェクト進行と開発チームの改善の “時間軸" のすり合わせ
konifar
9
3.1k
世界最速級 memcached 互換サーバー作った
yasukata
0
160
著者と読み解くAIエージェント現場導入の勘所 Lancers TechBook#2
smiyawaki0820
10
3.4k
AI (LLM) を活用する上で必須級のMCPをAmazon Q Developerで学ぼう / 20251127 Ikuma Yamashita
shift_evolve
PRO
2
100
Claude Code はじめてガイド -1時間で学べるAI駆動開発の基本と実践-
oikon48
43
26k
Symfony AI in Action
el_stoffel
2
370
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.3k
Bash Introduction
62gerente
615
210k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.3k
GitHub's CSS Performance
jonrohan
1032
470k
Why You Should Never Use an ORM
jnunemaker
PRO
60
9.6k
Typedesign – Prime Four
hannesfritz
42
2.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
700
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
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をつくーる