jansnap

NoCodeCamp公認Bubbleエキスパート。ノーコード開発うけたまわります。ご相…

jansnap

NoCodeCamp公認Bubbleエキスパート。ノーコード開発うけたまわります。ご相談はお気軽にTwitterで〜！→ https://twitter.com/jansnap729

2022年4月〜7月のブログ記事

2022年4月〜7月の間に、個人ブログに投稿した記事の一覧です。 ぜひご覧ください！ Bubble関連の記事(Bubble)AWS Amazon S3に動画ファイルをアップロードする (Bubble)独…

jansnap
jansnap
1年前

個人ブログを開設しました

個人ブログを開設しました。noteとQiitaに散らばっていた記事を1サイトにまとめ、新しい記事も追加しています。 ぜひご覧ください！ URL https://blog.jansnap.com/ 新し…

jansnap
jansnap
2年前
4

(Bubble)Backend workflowを使い始めるには？

NoCodeCampでBackend workflowのセミナーが2021年11月23日にあったので最初の部分だけ簡単にまとめました。 NoCodeCampのメンバーには動画が公開されるようなので、そちら…

jansnap
jansnap
2年前
7

(Bubble)グラフを表示するプラグインを作成しよう(Google Chartsライブラリ)

概要Bubbleのプラグインとして、Google Chartsライブラリを使ってシンプルな円グラフを描画するプラグインの作り方を解説します。 多少のコードを書く必要がありますが、Go…

500
jansnap
jansnap
2年前
11

(Bubble)長いテキストの「もっと読む」機能

概要長い文章を表示する際に、最初は短く折りたたんでおいて「もっと読む」をクリックしたら全文を表示したい場合があります。 実現方法(:truncated to)文字列に「:trunca…

jansnap
jansnap
2年前
5

(Bubble)Bubbleで中規模開発をする時の問題点

Bubbleで中規模開発？Bubbleを利用した開発が増えています。それにつれて複数人数でBubbleを同時にさわる開発スタイルが必要になってきました。 画面が30個以上あったり、B…

jansnap
jansnap
2年前
13

(Bubble)うまく動かない時にはエラー表示(issue)を確認する

概要Bubbleでページを作ってみたけれど、思った通りに動作しない。そんな時にはエラー表示(issue)を確認します。 エラー表示の場所エラー表示は画面の上側に赤色で表示さ…

jansnap
jansnap
2年前
2

(Bubble)移行を見据えたシステム設計その1

移行？Bubbleで作るサービスがヒットした場合、応答速度やデータ量の制限等をなくすために、プログラミングで作る別システムに移行することがあります。 あらかじめ準備し…

jansnap
jansnap
2年前
15

(Bubble)チェックボックスを全部はずしたら、全ての検索結果を表示する

概要チェックボックスで絞り込みをする際に、全てのチェックボックスをオフにした場合は、絞り込みをしないで全ての検索結果を表示したい場合があります。 例えば、不動産…

jansnap
jansnap
2年前
6

ノーコードテストツール「QAWolf」のテストで本番環境テスト/開発環境テストをワンクリックで切り替える

概要前回の記事で、ブラウザからのエンドtoエンドのテストがノーコードで作成・実施できる「QAWolf」というツールを紹介しました。 今回はBubble向けに、本番環境と開発環…

jansnap
jansnap
2年前
2

ノーコードでE2Eテストが作成できる「QA Wolf」を試してみた

QA WolfとはQA Wolf は、ブラウザから操作したようなエンドtoエンドのテストを、コーディングやサーバの準備をせずに作成・実行できるサービスです。 https://www.qawolf.c…

jansnap
jansnap
2年前
1

(Bubble)Google DocsにAPI経由でアクセスする(実践編)領収書を作成してPDFでダウンロードする

概要前々回、前回と、BubbleでGoogle DocsにAPI経由でアクセスする準備を行いました。 今回はいよいよ実際にGoogleのAPIにアクセスします。 例として、BubbleのDBを元に領…

jansnap
jansnap
2年前
15

(Bubble)Google DocsにAPI経由でアクセスする(準備編その2)

概要Google DocsにAPI経由でアクセスする方法を説明しています。 前回は、プロジェクトの登録など、アクセスに必要な準備を行いました。(こちらをご覧ください) 今回は、Bu…

jansnap
jansnap
2年前
6

(Bubble)Airtableから大量データを取得する時に「:filtered」を使うと、それ以降Airtableが使えなくなることがある

概要Airtableにある1万件程度のデータから、1件を絞り込んで取得しようとしました。 「:filtered」で絞り込みをして取得しようとしたところ、4分ほど待たされた後で「一時…

jansnap
jansnap
2年前
2

(Bubble)指定したエレメントにCSSを指定して外見を整える

概要BubbleはStylesにより色や線の太さなどの外見を整えることができます。 しかし、スタイルに該当しないような、エレメント内の文字の位置を調節したり、部分的に非表示…

jansnap
jansnap
3年前
13

(Bubble)複数の画像ファイルをアップロードして管理する

概要プロジェクトごとに複数の画像ファイルや説明文を管理するシステムをBubbleで作る方法を説明します。 プラグイン「Multi-File Uploader - Dropzone」プラグイン「Mult…

jansnap
jansnap
3年前
8
jansnap

jansnap

2022年4月〜7月のブログ記事

2022年4月〜7月のブログ記事

2022年4月〜7月の間に、個人ブログに投稿した記事の一覧です。
ぜひご覧ください！

Bubble関連の記事(Bubble)AWS Amazon S3に動画ファイルをアップロードする

(Bubble)独自ドメインでサービスを開始する

(Bubble)SEO対策をする

その他の記事「flutter doctor --android-licenses」が返ってこない時の対応方法

scrapy

もっとみる
jansnap

jansnap

個人ブログを開設しました

個人ブログを開設しました

個人ブログを開設しました。noteとQiitaに散らばっていた記事を1サイトにまとめ、新しい記事も追加しています。
ぜひご覧ください！

URL
https://blog.jansnap.com/

新しい記事(Bubble関連)(Bubble)ストアでプラグイン販売をする準備をしよう(その1・販売者の登録とStripe連携)

(Bubble)チャットワークにメッセージを送信する

(Bubbl

もっとみる
jansnap

jansnap

(Bubble)Backend workflowを使い始めるには？

(Bubble)Backend workflowを使い始めるには？

NoCodeCampでBackend workflowのセミナーが2021年11月23日にあったので最初の部分だけ簡単にまとめました。
NoCodeCampのメンバーには動画が公開されるようなので、そちらをごらんください。

概要BubbleのBackend workflowは以下の特徴があります。
・有料プランのみで使用可能(Personalプラン $25/month〜)
・複数のページから呼び

もっとみる
jansnap

jansnap

(Bubble)グラフを表示するプラグインを作成しよう(Google Chartsライブラリ)

(Bubble)グラフを表示するプラグインを作成しよう(Google Chartsライブラリ)

概要Bubbleのプラグインとして、Google Chartsライブラリを使ってシンプルな円グラフを描画するプラグインの作り方を解説します。
多少のコードを書く必要がありますが、Google Chartsライブラリのページにサンプルがあるので、多くはそこからコピーして使用します。

Bubbleプラグイン化するメリット今回使用するGoogle Chartsはjsライブラリなので、Bubble上でJ

もっとみる
jansnap

jansnap

(Bubble)長いテキストの「もっと読む」機能

(Bubble)長いテキストの「もっと読む」機能

概要長い文章を表示する際に、最初は短く折りたたんでおいて「もっと読む」をクリックしたら全文を表示したい場合があります。

実現方法(:truncated to)文字列に「:truncated to 30」のように文字数を指定して、先頭の何文字かだけを表示することができます。
下記の例では、Custom State「isTrancated」を「Yes/No」型で作成して、下部の「もっと読む」を押すご

もっとみる
jansnap

jansnap

(Bubble)Bubbleで中規模開発をする時の問題点

(Bubble)Bubbleで中規模開発をする時の問題点

Bubbleで中規模開発？Bubbleを利用した開発が増えています。それにつれて複数人数でBubbleを同時にさわる開発スタイルが必要になってきました。
画面が30個以上あったり、Backend Workflowを使って処理を共通化する必要があったり、機能を複数人で並行して組み上げていったり、という(Bubbleにしては)中規模の開発を行った際に、気になる問題があったので整理しました。

「アプリ

もっとみる
jansnap

jansnap

(Bubble)うまく動かない時にはエラー表示(issue)を確認する

(Bubble)うまく動かない時にはエラー表示(issue)を確認する

概要Bubbleでページを作ってみたけれど、思った通りに動作しない。そんな時にはエラー表示(issue)を確認します。

エラー表示の場所エラー表示は画面の上側に赤色で表示されます。オレンジ色のニュースアイコンと矢印マークの間に表示されます。

エラーがある時は、エラー数＋issue が表示されます。

エラーがない時は表示されません。

エラー一覧を確認する上述の赤文字をクリックすると、ポップア

もっとみる
jansnap

jansnap

(Bubble)移行を見据えたシステム設計その1

(Bubble)移行を見据えたシステム設計その1

移行？Bubbleで作るサービスがヒットした場合、応答速度やデータ量の制限等をなくすために、プログラミングで作る別システムに移行することがあります。
あらかじめ準備しておくと、移行がスムーズに進みます。
いくつかアイデアをご紹介します。

外部のログイン認証を使うBubble組み込みのログイン認証はパスワードを取り出せないため、移行時はパスワードを再登録してもらわなければなりません。
Google

もっとみる
jansnap

jansnap

(Bubble)チェックボックスを全部はずしたら、全ての検索結果を表示する

(Bubble)チェックボックスを全部はずしたら、全ての検索結果を表示する

概要チェックボックスで絞り込みをする際に、全てのチェックボックスをオフにした場合は、絞り込みをしないで全ての検索結果を表示したい場合があります。
例えば、不動産一覧を所在エリアで絞り込みたい時、指定が無ければ全ての物件を表示し、指定があれば該当の物件のみを表示するケースです。

絞り込み条件に「Ignore empty constraints」を指定するこれを実現するには、絞り込み条件に「Igno

もっとみる
jansnap

jansnap

ノーコードテストツール「QAWolf」のテストで本番環境テスト/開発環境テストをワンクリックで切り替える

ノーコードテストツール「QAWolf」のテストで本番環境テスト/開発環境テストをワンクリックで切り替える

概要前回の記事で、ブラウザからのエンドtoエンドのテストがノーコードで作成・実施できる「QAWolf」というツールを紹介しました。
今回はBubble向けに、本番環境と開発環境のテストを簡単に切り替える方法を紹介します。

Environmentタブを開くQAWolfにログインし、左メニューの「Environment」をクリックします。

Environment(環境)の追加Environment

もっとみる
jansnap

jansnap

ノーコードでE2Eテストが作成できる「QA Wolf」を試してみた

ノーコードでE2Eテストが作成できる「QA Wolf」を試してみた

QA WolfとはQA Wolf は、ブラウザから操作したようなエンドtoエンドのテストを、コーディングやサーバの準備をせずに作成・実行できるサービスです。
https://www.qawolf.com/ から利用できます。
実行画面はこんな感じです。Bubbleで作ったサービスを想定して、トップページを表示・ログイン・ログアウトできるかをテストしました。

Bubbleのサイトをテストする場合の

もっとみる
jansnap

jansnap

(Bubble)Google DocsにAPI経由でアクセスする(実践編)領収書を作成してPDFでダウンロードする

(Bubble)Google DocsにAPI経由でアクセスする(実践編)領収書を作成してPDFでダウンロードする

概要前々回、前回と、BubbleでGoogle DocsにAPI経由でアクセスする準備を行いました。
今回はいよいよ実際にGoogleのAPIにアクセスします。
例として、BubbleのDBを元に領収書を作成してPDFでダウンロードする処理を実装します。

雛形のドキュメントファイルを作成書き換え元になる領収書をGoogle Docsに以下のように作成しました。

どのAPIを使うか調べるまずは、

もっとみる
jansnap

jansnap

(Bubble)Google DocsにAPI経由でアクセスする(準備編その2)

(Bubble)Google DocsにAPI経由でアクセスする(準備編その2)

概要Google DocsにAPI経由でアクセスする方法を説明しています。
前回は、プロジェクトの登録など、アクセスに必要な準備を行いました。(こちらをご覧ください)
今回は、Bubble側での準備を行います。

準備するものアクセストークン、リフレッシュトークン、クライアントID、クライアントシークレット、アプリのスコープ、トークンの有効期限。
BubbleにGoogleTokenテーブルを作っ

もっとみる
jansnap

jansnap

(Bubble)Airtableから大量データを取得する時に「:filtered」を使うと、それ以降Airtableが使えなくなることがある

(Bubble)Airtableから大量データを取得する時に「:filtered」を使うと、それ以降Airtableが使えなくなることがある

概要Airtableにある1万件程度のデータから、1件を絞り込んで取得しようとしました。
「:filtered」で絞り込みをして取得しようとしたところ、4分ほど待たされた後で「一時的な不具合により実行が中断されました。早急に問題の解消を進めておりますので、少し待って再度操作をお願いします。」と表示されました。
その後は、Airtableの他のテーブルも含め、Airtableからデータが取得できなく

もっとみる
jansnap

jansnap

(Bubble)指定したエレメントにCSSを指定して外見を整える

(Bubble)指定したエレメントにCSSを指定して外見を整える

概要BubbleはStylesにより色や線の太さなどの外見を整えることができます。
しかし、スタイルに該当しないような、エレメント内の文字の位置を調節したり、部分的に非表示にしたい場合は、個別にCSSを適用する必要があります。

CSS Toolsプラグインのインストール
CSS Toolsプラグインをインストールすると、Bubble内でCSSを指定できるようになります。
左メニューの「Plugi

もっとみる
jansnap

jansnap

(Bubble)複数の画像ファイルをアップロードして管理する

(Bubble)複数の画像ファイルをアップロードして管理する

概要プロジェクトごとに複数の画像ファイルや説明文を管理するシステムをBubbleで作る方法を説明します。

プラグイン「Multi-File Uploader - Dropzone」プラグイン「Multi-File Uploader - Dropzone」は、複数のファイルをドラッグアンドドロップで一度にアップロードできるプラグインです。
Bubble公式の作成したプラグインで、ドキュメントもあり

もっとみる