loader image

ノーコードツール「bubble」の特徴をサクッと解説!

WANTO記事bubbleの特徴

こんにちは。

bubbleでプロダクトの開発を行っておりますWANTOの西坂優希(@nishiyuki0501)と申します。

ここ数年でIT業界ではAIやノーコードと新しい技術が出てきております。そして、この変化によって難しく感じている方も少なくはないと思います。また、ツールもたくさん存在して、違いがわからないことも少なくはないかと思います。そこで今回はノーコードツールの「bubble」について紹介していきます。

bubbleとは「直感的に開発ができるサービス」

bubbleは、ノーコード開発プラットフォームの一つです。ユーザー数は200万人を超えており、世界的に人気のノーコード開発プラットフォームです。

一切のプログラミングスキルなしに、ウェブアプリケーションを作成することができます。ドラック&ドロップと直感的でシンプルな操作で独自のデザインと機能を持つウェブアプリケーションを開発できます。

また、従来の画面遷移を開発するツールではできなかったデータベース管理やユーザ認証、外部サービスとの連携などの機能も含めて設定することができます。これにより、多岐にわたる開発が可能になります。

ちなみに、弊社が開発および市場検証中の「学習塾の運営を10倍効率化するアプリWANTO」もbubbleで開発しております。

bubbleでできること

bubbleは「Webアプリ」開発を得意とするツールです。

前提として、アプリには主に2種類あります。

Webアプリ・・・Google ChromeやSafariといったブラウザソフトの中で使うアプリです。
ネイティブアプリ・・・iPhoneの方はApp StoreAndroidの方はGoogle Play Storeからダウンロードするようなアプリです。

bubbleでネイティブアプリの開発も可能ではありますが、Webアプリを作ることを想定されているツールであるため、ネイティブアプリ開発の場合は他のツール(AdaloやFlutter Flowなど)をお勧めします。

それではbubbleでできることを見ていきましょう。できることの一部は以下の通りです。

高度なアプリを高速で開発

bubbleはノーコードツールの中では最も汎用性の高いツールとされています。そのため、基本的には実装ができないことはありません。

かなり複雑な開発ができる上に、大規模な開発も可能であるという特徴があります。

そして、開発の操作においてもドラック&ドロップで配置していくため直感的にデザインを反映させることができます。バックエンド(データの編集などのアプリの裏の動き)の設定も選択肢が準備されているため、簡単かつ高速に開発が可能です。

bubbleで機能を実装する

ノーコードツールを検討している方の多くが感じていることとして、「ノーコード開発ってセキュリティ面は大丈夫なの?」というご相談をお見受けします。

bubbleは詳細なセキュリティ設定ができるほか、構築自体がAmazon Web Services (AWS)上に構築されているため、AWS自体が持っているSOC2、CSA、ISO 27001などのセキュリティ資格の認定を受けています。

そのため、bubbleはセキュリティ面においても厳重に管理することができる機能を備えているツールであると言えるでしょう。

外部サービスとの連携

bubbleはプラグイン(拡張機能)やAPI(外部のサービスと連携する際に必要なもの)の設定があります。そのため、外部サービスとの連携をすることでより多岐にわたる開発が可能です。

例えば、外部サービスとの連携によってできるようになる機能は以下の通りです。

  • LINEやGoogleなどのSNSを使った連携
  • Googleマップの地図を用いてルート検索
  • Googleカレンダーにイベントを追加する

こちらで紹介したものはほんの一部に過ぎませんがこうした外部サービスとの連携ができることもbubbleの強みです。

bubbleの利用料金

Bubbleは、個人ユーザーから大企業まで幅広いユーザーのニーズに対応するため、異なるプランを提供しています。
最初のフリープランでは基本的な機能を提供しますが、StarterプランやGrowthプランやTeamプランでは、より高度な機能とリソースが提供されます。詳細は以下の通りです。

– bubbleのプランは以下の通り(為替レートは1ドル134円で計算)
 - Freeプラン
  - 無料
 - Starterプラン
  - $32+workload超過分(4,284円)
 - Growthプラン
  - $134+workload超過分(17,939円)
 - Teamプラン
  - $399+workload超過分(53,416円)
 - Customプラン
  - コンタクト(お問い合わせして下さい)

※ワークロードについては簡単に説明すると「使用量」です。こちらの計算についてはbubbleエンジニアの中でも現在調査中です。(5月からの新プランのため)

bubbleが向いているフェーズの人の特徴

bubbleは、ビジネスアイデアを具現化したい起業家、自分のアイデアを形にしたい方、または既存の業務フローをデジタル化したい企業の方々にとって理想的なツールです。

また、プログラミングスキルを持っていない初心者や、すばやくプロトタイプを作りたい開発者にとっても有用です。bubbleは、あなたの創造性を制限することなく、アイデアをより早く、より安価に実現できるプラットフォームです。

最後に

bubbleはアイデアをより早く、そしてより自由に開発することができるプラットフォームです。bubbleを使うことで今まで頭の中で思い描いていた「あったらいいな」を形にできます。皆さんもこれを機にぜひbubbleの世界へ。

私、西坂優希は、ノーコード にてシステム開発のご支援をさせていただいております。
ノーコードによる開発依頼やノーコードに関すること、業務効率化などでご質問やご相談等がございましたらご遠慮なく、下記よりご連絡頂けますと幸いです。
下記のTwitterのDM、もしくはHPからご連絡ください。

TORYUMON FUKUOKA にて受賞

TORYUMONに登壇している西坂

WANTOは6月17日に行われました「TORYUMON FUKUOKA 2023 Summer」にてピッチを行い、受賞しました。

TORYUMONは福岡発のシード系独立VCであるF Ventures主催の起業家イベントです。過去にTimeeの小川をはじめとする学生起業家が排出されています。毎年、シードからアーリーフェーズの起業家が登壇しています。。今回、西坂は「学習塾の運営を10倍効率化するアプリWANTO」を発表しました。

WANTO代表西坂とFGNの担当者様との表彰写真

なお、在籍大学である大分大学において、このTORYUMONでの受賞は2019年11月にCRITCHの佐藤氏が受賞して以来2人目のことです。

今後もインタビューを通したさらなる改善に寄与していきます。WANTOをよろしくお願い申し上げます。

【コピペでできる!】NotionのデータベースのステータスによってLINEに自動共有する

LINE NotifyとGASの連携アイキャッチ

はじめに

多くの人が仕事や学業、日常生活において情報を整理し、効率的に管理することが求められています。

そのために、さまざまな情報管理ツールが活用されています。この記事では、人気の情報管理アプリ「Notion」と、リアルタイムの通知サービス「LINE Notify」をGoogle Apps Scriptを用いて連携させる方法をご紹介します。これにより、Notionでの情報更新やタスク管理がさらに便利になり、日常生活や仕事での情報の取り扱いが一層スムーズになることでしょう。

それでは、NotionとLINE Notifyの連携方法について詳しく見ていきましょう。

完成はこちら(Google Apps Scriptに貼り付けてください)

const LINE_NOTIFY_API_TOKEN = 'LINE NotifyのAPI keyを入力してください';
const NOTION_API_KEY = 'Notion API keyを入力してください';
const DATABASE_ID = 'NotionのデータベースのIDを入力してください';

function sendNotification() {
  const newArticles = getUnpublishedArticles();

  newArticles.forEach(article => {
    updateArticleStatus(article.id);
    sendLineMessage(article.title, article.url);
  });
}

function getUnpublishedArticles() {
  const url = `https://api.notion.com/v1/databases/${DATABASE_ID}/query`;
  const options = {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${NOTION_API_KEY}`,
      'Content-Type': 'application/json',
      "Notion-Version": "2022-06-28",
    },
    payload: JSON.stringify({
      filter: {
        property: 'ステータス',
        select: {
          equals: '',
        },
      },
    }),
  };

  const response = UrlFetchApp.fetch(url, options);
  const data = JSON.parse(response.getContentText());
  const articles = data.results.map(item => {
    return {
      id: item.id,
      title: item.properties['記事名'].title[0].text.content,
      url: item.url,
    };
  });

  return articles;
}

function updateArticleStatus(pageId) {
  const url = `https://api.notion.com/v1/pages/${pageId}`;
  const options = {
    method: 'PATCH',
    headers: {
      'Authorization': `Bearer ${NOTION_API_KEY}`,
      'Content-Type': 'application/json',
      "Notion-Version": "2022-06-28",
    },
    payload: JSON.stringify({
      properties: {
        'ステータス': {
          select: {
            name: '完了',
          },
        },
      },
    }),
  };

  UrlFetchApp.fetch(url, options);
}

function sendLineMessage(title, url) {
  const message = `新着記事のお知らせ\n${title}が公開されました!以下のリンクから確認してください!\n${url}`;
  const notifyUrl = 'https://notify-api.line.me/api/notify';
  const options = {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${LINE_NOTIFY_API_TOKEN}`,
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    payload: {
      message: message,
    },
  };

  UrlFetchApp.fetch(notifyUrl, options);
}

1. LINE NotifyのAPIを取得する

  1. LINE Notifyの公式ページを開いてください。(https://notify-bot.line.me/ja/
  2. 右上のログインをしてください。
  3. LINEに登録しているメールアドレスとパスワードを入力してログインしてください。
  4. 右上の自分の名前>マイページを押してください。
  5. マイページの下層にある「アクセストークンの発行(開発者向け)」の部分の「トークンを発行する」を選択してください。
  6. トークン名と通知するトークまたはグループを選択してください。トークン名はLINEの通知の文章に使われるのでわかる名前にすることをお勧めします。
  7. トークンをコピーしてください。(最初のコードにコピペします)

2. Notion APIの取得

  1. Notion APIの公式ページに移動してください。(https://developers.notion.com/
  2. 右上のMy Integrationを押します。
  3. ご自身がわかるようなインテグレーションの名前を入力して下の写真のようになるように選択してsubmitボタンを押してください。(基本触らなくて良いはずです)
  4. Secretsのトークンキーをコピーしてください。最初のコードにコピペして使います。

3. NotionのデータベースのIDを取得

  1. 自身のNotionページを開きます。(ブラウザ版を奨励します)
  2. データ元(LINEに共有したいデータが集まっているデータベース)を開きます。開くときはデータベース右上にある最大化ボタンを押してください。
  3. データベースのフルページを開くと、右上の3点から連携(connection)を選択してください。こちらから先ほどのステップで追加したAPIをこのページと繋いでいきます。
  4. 3点ボタンを押して、下部にある連携(connection)の中にある先ほどのステップ2で発行したNotion APIの名前を選択してください。
  5. 最後にデータベースのIDを探します。リンクは以下の構成になっています。ワークスペースの部分の文字列をコピーしてください。後ほど最初のコードに埋め込みます。
    ※もしもアプリ版(パソコンソフト版)を使っている場合は⌘+Lでそのページのリンクをコピーできるのでテキストエディタなどに貼り付けて上記の文字列を探してみてください。

補足 データベースのプロパティの調整

以下のテンプレを複製していただくことが一番簡単にできます。(下記の設定をすでに反映させております)
今回のコードを使うためには記事があるデータベースのプロパティを以下のように設定しておく必要があります。

  • 記事のタイトルをテキストプロパティの「記事名」という名前
  • 更新状況を示すためにセレクトプロパティ(単一選択)の「ステータス」をいう名前
    • ステータスの選択肢に「完了」を事前に作成しておく

https://nishiyuki0501.notion.site/Notion-LINE-Notify-0e25f22f450544fa95386c02c695235a

4. コードに反映されていく

  1. Google Apps Script(以下、GASと表記)の公式ページを開きます。(https://script.google.com/home
  2. (初めての方はログインします)
  3. エディタを開いたら、最初のコードを全てコピペしてください。最初のfunction(){}も消して、全て置き換えます。
  4. 保存して、実行を押すと権限確認が必要というポップアップが表示されるので「権限を確認」を押してください。
  5. Googleでログインすると「このアプリはGoogleに接続されていません」と出てくるので左下の「詳細」を押してください。
  6. 「詳細」を押すと「安全でないページへ移動」と出てくるので押してください。
    ※外部サービスとの連携により、情報漏洩などのリスクがあるという意味で接続には注意してくださいという意味です。
  7. 外部サービスとの接続を許可してください。(GASでプロジェクトを初めて動かすときは毎回この作業が必須になります。)

実際に動かした通知

実際に動かしてみるとLINEに記事名とそのリンクが共有されます。
記事の共有権限が「リンクを知っている人が閲覧可能」になっていることが前提ですが、通知を受け取った人が見ることができます。

通知のタイミングはGASのトリガーを用いて指定の時間にチェックするなどすれば完全に自動で送られるようになります。

最後に

いかがだったでしょうか。

少し長編にわたる内容でしたが、Notion内の情報をLINEに自動で送信することでコミュニティの運営や情報共有が円滑になる可能性が高いと思います。

こうした記事を今後も発信していきますので、ぜひ参考にしていただけますと嬉しいです。

ありがとうございました。