jansnap

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

jansnap

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

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

    2022年4月〜7月の間に、個人ブログに投稿した記事の一覧です。 ぜひご覧ください！ Bubble関連の記事(Bubble)AWS Amazon S3に動画ファイルをアップロードする (Bubble)独自ドメインでサービスを開始する (Bubble)SEO対策をする その他の記事「flutter doctor --android-licenses」が返ってこない時の対応方法 scrapy 2.6.1 でエラーハンドリングする

    jansnap

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

        個人ブログを開設しました。noteとQiitaに散らばっていた記事を1サイトにまとめ、新しい記事も追加しています。 ぜひご覧ください！ URL https://blog.jansnap.com/ 新しい記事(Bubble関連)(Bubble)ストアでプラグイン販売をする準備をしよう(その1・販売者の登録とStripe連携) (Bubble)チャットワークにメッセージを送信する (Bubble)検索結果から重複を排除する Bubbleプラグイン「Animated ba

        jansnap

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

          NoCodeCampでBackend workflowのセミナーが2021年11月23日にあったので最初の部分だけ簡単にまとめました。 NoCodeCampのメンバーには動画が公開されるようなので、そちらをごらんください。 概要BubbleのBackend workflowは以下の特徴があります。 ・有料プランのみで使用可能(Personalプラン $25/month〜) ・複数のページから呼び出せる ・日時を指定した処理ができる ・一括処理なので、動作が早い ・外部サービ

          jansnap

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

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

            500
            jansnap

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

            概要長い文章を表示する際に、最初は短く折りたたんでおいて「もっと読む」をクリックしたら全文を表示したい場合があります。 実現方法(:truncated to)文字列に「:truncated to 30」のように文字数を指定して、先頭の何文字かだけを表示することができます。 下記の例では、Custom State「isTrancated」を「Yes/No」型で作成して、下部の「もっと読む」を押すごとにYes/Noを切り替え、先頭30文字表示と全文表示を切り替えています。 ・フ

            jansnap

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

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

            jansnap

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

            概要Bubbleでページを作ってみたけれど、思った通りに動作しない。そんな時にはエラー表示(issue)を確認します。 エラー表示の場所エラー表示は画面の上側に赤色で表示されます。オレンジ色のニュースアイコンと矢印マークの間に表示されます。 エラーがある時は、エラー数＋issue が表示されます。 エラーがない時は表示されません。 エラー一覧を確認する上述の赤文字をクリックすると、ポップアップでエラーの詳細が表示されます。 この一覧には、エラーの内容と、どのページでエ

            jansnap

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

            移行？Bubbleで作るサービスがヒットした場合、応答速度やデータ量の制限等をなくすために、プログラミングで作る別システムに移行することがあります。 あらかじめ準備しておくと、移行がスムーズに進みます。 いくつかアイデアをご紹介します。 外部のログイン認証を使うBubble組み込みのログイン認証はパスワードを取り出せないため、移行時はパスワードを再登録してもらわなければなりません。 GoogleやAuth0(OAuth)など、外部のログイン認証を使って回避します。 Bubb

            jansnap

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

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

            jansnap

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

            概要前回の記事で、ブラウザからのエンドtoエンドのテストがノーコードで作成・実施できる「QAWolf」というツールを紹介しました。 今回はBubble向けに、本番環境と開発環境のテストを簡単に切り替える方法を紹介します。 Environmentタブを開くQAWolfにログインし、左メニューの「Environment」をクリックします。 Environment(環境)の追加Environment Variableの画面が表示されるので、左側の「Create Environm

            jansnap

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

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

            jansnap

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

            概要前々回、前回と、BubbleでGoogle DocsにAPI経由でアクセスする準備を行いました。 今回はいよいよ実際にGoogleのAPIにアクセスします。 例として、BubbleのDBを元に領収書を作成してPDFでダウンロードする処理を実装します。 雛形のドキュメントファイルを作成書き換え元になる領収書をGoogle Docsに以下のように作成しました。 どのAPIを使うか調べるまずは、処理の流れと、使用するAPIを整理します。 今回は領収書を作成するので、以下の流

            jansnap

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

            概要Google DocsにAPI経由でアクセスする方法を説明しています。 前回は、プロジェクトの登録など、アクセスに必要な準備を行いました。(こちらをご覧ください) 今回は、Bubble側での準備を行います。 準備するものアクセストークン、リフレッシュトークン、クライアントID、クライアントシークレット、アプリのスコープ、トークンの有効期限。 BubbleにGoogleTokenテーブルを作って、各データを含んだレコードを1つだけ作成しておきます。 用語の説明・アクセス

            jansnap

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

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

            jansnap

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

            概要BubbleはStylesにより色や線の太さなどの外見を整えることができます。 しかし、スタイルに該当しないような、エレメント内の文字の位置を調節したり、部分的に非表示にしたい場合は、個別にCSSを適用する必要があります。 CSS Toolsプラグインのインストール CSS Toolsプラグインをインストールすると、Bubble内でCSSを指定できるようになります。 左メニューの「Plugins」から、CSS Toolsを検索してインストールします。 プラグインの詳細は

            jansnap

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

            概要プロジェクトごとに複数の画像ファイルや説明文を管理するシステムをBubbleで作る方法を説明します。 プラグイン「Multi-File Uploader - Dropzone」プラグイン「Multi-File Uploader - Dropzone」は、複数のファイルをドラッグアンドドロップで一度にアップロードできるプラグインです。 Bubble公式の作成したプラグインで、ドキュメントもあります。 YouTubeに解説動画があります。 インストールすると、エレメントの

            jansnap