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
65
ガチマナ会 vol.1
ノーコードでSNSをつくーる
Satoshi Gachi Fujimoto
February 20, 2024
Tweet
Share
More Decks by Satoshi Gachi Fujimoto
See All by Satoshi Gachi Fujimoto
画像生成AIを使って勝負しよう
satoshirobatofujimoto
1
49
画像生成AIを使って勝負しよう
satoshirobatofujimoto
0
64
画像からプロンプトを考えて最も似ている画像を生成した人が勝ちのゲーム@AIミーティング
satoshirobatofujimoto
0
60
VPS研究者が語る”VPS概論”
satoshirobatofujimoto
0
300
画像からプロンプトを考えて最も似ている画像を生成した人が勝ちのゲーム
satoshirobatofujimoto
0
93
OpenAI 新機能まとめ(Function callingとAdd your data編)
satoshirobatofujimoto
0
180
PLATEAUを用いた熊本市中心市街地におけるバリアフリー情報の可視化
satoshirobatofujimoto
0
890
ChatGPTがもたらす新しいチーム開発の現場
satoshirobatofujimoto
0
330
Vue2 × Vuetifyでチャットアプリつくーる
satoshirobatofujimoto
0
460
Other Decks in Technology
See All in Technology
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
Building Dashboards as a Hobby
egmc
0
290
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
300
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
610
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
110
Azureの基本的な権限管理の勉強会
yhana
0
950
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.3k
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
210
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
430
.NET Profiler in 2024.
kkamegawa
1
190
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
3
560
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Infographics Made Easy
chrislema
238
18k
Designing for humans not robots
tammielis
248
25k
Six Lessons from altMBA
skipperchong
21
3k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
The Pragmatic Product Professional
lauravandoore
25
5.8k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Code Review Best Practice
trishagee
55
15k
Music & Morning Musume
bryan
41
5.6k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.9k
Producing Creativity
orderedlist
PRO
337
39k
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をつくーる