プログラミング覚え書き

WEB製作覚え書き

ノート代わりに勉強した内容をまとめています。

Bubble:Xに投稿する

 

X側の操作

 ①Xのアカウントを作成

  ※このアカウントで投稿することになる

 ②下記リンク(管理者用画面)からログイン

  https://developer.twitter.com/en/portal/dashboard

 ③こちらの記事を参考にAPIキーを取得  

sananeblog.com

 

Bubble側の操作

1.プラグイン設定

 ①Twitter Tweetをインストール

   

 ②下記4か所のキーを入力

   

 

2.ワークフローの設定

 ①postボタンを設定

 ②postボタンにtweetを設定

   

  ※それぞれDo asearch forを設定可能だが、

   Image URLには、「https:」を忘れないこと。

 

Bubble:フォントを追加する

①フォントファイルをローカルにダウンロード

CSSファイルを新規作成し→下記を記述→そのまま開いておく

@font-face {
  font-family: 'フォント名';
  src: url('https:パス');
}

 ※ファイル名は適当に設定してよいが、フォントファイルと同名がわかりやすい。

③BubbleにFileUploaderを設置

④Static Fileにて、フォントファイルをアップロード

Dynamic Linkに表示されたパスをコピー

  

cssファイルの「パス」の部分にペースト

cssファイルの「フォント名」を(フォントファイルと同名に?)設定しコピー

 →ファイルを上書き保存し閉じる

⑧Bubble:Settings→General→Custom Fonts

 のFont Nameに⑦でコピーしたフォント名をペースト

⑨FileUploaderのエディタを再び開き、

 Static Fileにて、cssファイルをアップロード

Dynamic Linkの表示が変わるので、そのパスをコピー

⑪Bubble:Settings→General→Custom Fonts

 のCSS File Pathに⑩でコピーしたパスをペースト

 ※頭に「https:」を付けること

⑫Add fontをクリック

 フォント名が表示されたら成功

  

    

 

Bubble:リレーション

 

表示順Fieldを持つData typeに、List型のFieldを設け、そこに表示したいData typeを紐づける方法

1.Option sets、Data typeを設定、作成する

   

   

   

 

2.入力フォームを作成する

   

  完成したフォームで入力したデータがこちら↓

   

   

 

3.ワークフローを設定する

 ①登録するボタンクリック時に、Create a new thingとMake changes toを設定

 ②詳細を下図の通り設定

   

 

 

4.Repeating Groupの設定

   

   下図のように表示できる↓

   

 

 

Data typeの情報を、紐づけた別のData typeのFieldの昇順で表示する

表示したいData typeに、表示順を入力する方法

1.Option sets、Data typeを設定、作成する

   

   

 

 

2.入力フォームを作成する

   

 

 

3.ワークフローを設定する

 ①登録するボタンクリック時に、Create a new thingを設定

 ②詳細を下図の通り設定

   

  完成したフォームで入力したデータがこちら↓

   

 

 

4.Repeating Groupの設定

   

   下図のように表示できる↓

   

 

※この方法のデメリット:メンテナンス性が悪い

Bubble:リンクプレビュー

リンクプレビューとは、URLに設定されたタイトル、イメージ、説明文などを表示する機能です。

 

 ①下記リンクからLink Preview公式サイトにてユーザー登録

  http://Link Preview

 ②ダッシュボードに表示されるYour API keyをコピー

   

 

 ③Link Previewプラグインを追加

   

 ④そのまま下へスクロールして、APIキーを張り付け

   

 

2.デザイン

 ①Groupを設置し、下図の通り設定

   

 ②Group内に、TextやImageを設置

 ③それぞれに下図のように表示させたい項目を設定

   

 下図の通りリンクプレビューが表示されました

   



 

Bubble:アカウントによって表示を切り替える

 

タブの切替

タブによる表示切替はこちら

 ①タブBのワークフローををコピペ

 ②When…を右クリック⇒Replace by another typeをクリック

   

 ③User is logged inを選択

   

 ④アカウントを限定する設定

   

 

ページの切替

1.アカウントA用のページを作成

 ①アカウントA用のページを作成

 ②ログアウト時のワークフローを追加

   

 ③ ②に、トップページへ戻るアクションを設定

   

 ④ログイン時のワークフローを追加

   

 ⑤ ④に、アカウントBに限定する設定

   

 ⑥ ④に、トップページへ戻るアクションを設定

 

2.アカウントB用のページを作成

 ①アカウントA用のページを複製

 ②アカウントAの際にトップページへ移動するよう設定変更

 

3.マイページボタンの設定

 ①ヘッダーにマイページボタンを設置

 ②それぞれのアカウント毎に専用ページへ遷移する設定

   

 

 

 

 

Bubble:ログイン/ログアウトで表示切替

 ①ログイン時に表示するパーツ、ログアウト時に表示するパーツを設置

 ②Layoutを下図の通り設定

   

 ③ログアウト時のパーツに下図の通りConditionalを設定

   

 ④ログイン時のパーツのConditionalに、

  ⑤とは表示/非表示を逆に設定