【2023年5月最新】ノーコード初心者がbubbleで Twitterのような簡単なSNSを2時間で製作!

最近ノーコードが気になっているのですが、色々なサービスがあってどれがいいのかわかりません。

こんな悩みにお答えします。

 

最近『ノーコード』という言葉を良く耳にするようになりましたよね。

『ノーコード』とは簡単に言うとプログラム言語を使わなくてもWebサービスや、スマートフォン用のアプリを製作できてしまうサービスの事なんです。凄いですよねこれ?

実はこのサービス、最近でてきたわけではなく、昔からあるものなのですが、2020年1月にあのGoogleが、AppSheetというノーコードの会社を買収したことが話題になり、現在トレンド化するようになりました。

そのため、最近ではこのノーコードのサイトが多くなってきおり、どのサービスを使っていいのかわからないといった方が多いと思います。(英語のサイトがほとんどということもあってわかりにくい)

同じノーコード初心者の私も凄く迷い、そして私なりに色々なサービスを触ってみました。

その結果、『bubble』というサイトが現時点では一番だと思ったので今回この記事で紹介することにしました。

この『bubble』は色々なノーコードの先駆者の方々も紹介しております。ぜひこの記事も参考にして、試してみてください。

この記事を読んでわかること

・ノーコードbubbleとは何かがわかるようになる。
・bubbleを始める際、誰の何を参考にしたらいいかがわかるようになる。
・どういったものが実際できるのか、私が作ったWebアプリを体験できる。

関連リンク↓

【ノーコード】Bubble ポップアップから対象データを削除する方法 Displayの使い方について解説
ノーコードBubbleでポップアップを使った削除の仕方について解説してます。実際のアプリ画面と、エディターをのせてわかりやすく説明してありますので参考にしてみてください。
スポンサーリンク
記事内広告‐1

bubbleとは?

bubbleとは、ノーコードでWebアプリを製作できるアプリです。プログラミング言語を全く書かずともアプリ製作ができ、無料で使うことができます。(もちろん有料プランもあります。)

しかも、汎用性が高く本格的なアプリを開発することが魅力です。また、ノーコードの中でも歴史があり知名度も高く、操作についての説明や情報が多いです。

但し、いくらノーコードだからといっても誰でも初めから簡単にアプリが製作できるかというとそんな簡単なものではありません。やはりある程度学習は必要のようで、私も今勉強中です。

なぜbubbleなのか?

色々なノーコード開発アプリの中で私がなぜ今bubbleを選んだのか?

それはアプリ製作にあたっての汎用性の高と、先駆者の方々の情報発信の多さです。

まずは汎用性の高さから説明すると、他のノーコード製作アプリはGoogleのスプレットシートから簡単に製作できるものもありますが、あまり汎用性が高くありません。

次にやはり情報量の多さです。歴史があり知名度が高い分、先駆者の方々の情報量が圧倒的に多いです。

私がお勧めするのは下記Youtube動画や、ブログです。

◆NoCode NinjaさんのYoutube動画

初心者の方はこのNoCoce NinjaさんのYoutube動画から勉強した方がいいかもしれません。

あくまでも私個人の考えですが、bubbleの細かい操作から動画で説明されているため、大変わかりやすく、また後々作業をするときに役に立ちます。

森岡修一
作成した動画を友だち、家族、世界中の人たちと共有

◆ノーコードラボ 

ノーコードについての記事が沢山あります。

また初心者が始めるにあたっての操作の仕方などの記事が沢山あるため大変便利です。特に『○○○もどき』・『○○○風』の作り方といった記事は作り方を細かく説明されているため大変参考になります。

ノーコード ラボ
NoCode 関連のツールの紹介、使い方などをやさしく説明しています。Chatbot の運用実験は終了しました。ご協力いただいたみなさん、ありがとうございました。

◆しんじさんのYouTube NoCode School – ノーコードスクール –

こちらは正直初めての方が取り掛かるにはハードルが高いです。

そのため先ほど紹介したNoCode忍者さんとノーコードラボさんのところである程度勉強してから取り掛かるのをお勧めします。

学習コンテンツとしては『bubbleを学ぶ Part1~11』です。少し説明スピードが速いので、倍速(0.5~0.75ぐらい)を落として見たほうがわかりやすかもしれません。

NoCode School - ノーコードスクール -
プログラミングを書けない方でも、NoCode - ノーコード -系のツールを使って、短時間でいろんなサービスを作ることができる方法を発信していきます。

◆keiさんのアプリ開発ゼミ With Bubble

一番のおすすめがkeiさんが運営しているYOUTUBEチャンネル『アプリ開発ゼミ With Bubble』です。

マッチングアプリの製作から、細かな操作方法の仕方など本当にわかりやすい解説付きの動画となっております。正直有料級だと思います。

このYOUTUBEチャンネルは現在も更新しているので、チャンネル登録しておけば色々とノーコード開発のことや、Bubbleの情報など知ることができますよ。

アプリ開発ゼミ With Bubble
アプリ開発ゼミでは、現在約40本の動画をYouTubeで公開しています。 YouTubeに公開されていない80本以上の動画が見たい方は公式LINEをご登録ください。 ■運営について アプリ開発ゼミはBoot株式会社が運営しているYouTubeチャンネルです。 Boot株式会社 代表取締役 三谷憩 Boot株式会...

上記の方々はTwitterで有益なツイートをしておりますのでフォローすることをお勧めします。

Bubbleの操作画面

操作画面は下図のようになっています。左側にエレメントいとわれる操作項目がありここで用途にあっものを選び右側でデザインしていきます。

bubbleで優れているのはworkflowと、dataベースだと思います。この機能が比較的簡単にでき、様々なことに対応できるので汎用性が高い要因の一つだと思います。

 

【workflow】

 

【data】

私が製作したアプリを紹介 (Twitterのような簡単なSNS&iPhoneのメッセンジャーもどき)

実際に私が作ったアプリをご紹介します。今回ご紹介するアプリはノーコードラボさんの記事をもとに製作しています。よかったら見てみてください。

こちらは『Twitter風』のアプリです。アカウントは、『ID:test@bubble.com』,『PW:bubbul』です。

Bubble - Visual Programming
Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to b...

こちらは『iPhoneのメッセンジャーもどき』です。アカウントは、ID,PWともに『test』です。

Bubble - Visual Programming
Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to b...

まとめ

まだまだやり始めたばかりなのでよくわからないことが多いですが、散々プログラミングで挫折してきた私でも、このbubbleであれば色々なアプリを製作できると感じています。(実際、Twitter風や、メッセンジャーもどきが作れたことは衝撃的でした。)

ただ、まだまだ使い方や、どうやって稼げるかなどわからないことが多いためこれから色々と調べてまたブログの記事にしていきたいと思っています。

尚、他にもノーコードで開発できるアプリは沢山あります。自分の用途にあったものを選択して使用するのも開発するにあたって大事なことだと思うので、自分でよく調べてから製作に取り組むようにしましょう。

コメント

  1. クロ より:

    はじめまして、こんばんは。
    突然のコメント失礼します。
    私のノーコードラボさんのページを参考に、
    SNSをつくっているのですが、
    ツイートの一覧画面で、ツイートを投稿したユーザー名とアイコンがログイン中の人のアカウントしか表示されない現象にはまってしまっております。

    ranoさんはそのような状態にはならなかったでしょうか?
    もしアドバイスいただけたら幸いです。
    よろしくお願いします。

    • ranorano より:

      クロさんコメントありがとうございます。
      その現象は多分Bubbleのプライバシールールのデフォルト値によるものだと思います。
      私もこれに以前はまりました。

      ノーコードラボさんが記事を書いてくれているので、下記にリンクを貼っておきます。

      https://blog.nocodelab.jp/entry/newprivacyrule

      これでも変わらない場合はまた連絡ください。

タイトルとURLをコピーしました