No Code ノー・コードでTwitterクローンを作成する方法 | ★カール経営塾★経営学用語集起業独立成功MBAの為のビジネス力養成サイト

コードを一行もかかないでWebアプリケーション、プラットフォームが作成できるノーコードが日本でも注目を浴びてきました。オンライン講座のプラットフォームを作りたい方はTeachableが王道です。月に100万円以上稼げる人が続出しています！私もはじめて初月から30万円以上の利益が出ました！

今回はBubbleを使ってTwitterのクローンサイトを作る方法についてBubbleからご案内をいただいたので（HPに載っていますが）以下に参考までに日本語訳を作成してみました　ただGoogle翻訳を使って多少わかりやすく修正かつ自分が必要なところだけなのであくまでもご参考までです！日本人の中からも世界的なプラットフォームが生まれることを期待しています！プラットフォーム戦略は(株)ネットストラテジーの登録です！

ただ私自身いろいろと試しているのですがやはり基礎としてのプログラミング知識は必要だと痛感しています　ノーコードを知れば知るほど逆にプログラミングを学ぶべきだと思うようになっています

●０円のプログラミングスクールという近道　実際imodeの担当になる前にHTMLとCSSは独学で本で勉強しましたがやはり初めから習った方が遥かに効果があると実感しています　わからないときに悩んでいる時間が一番勿体ないのです　最近はプログラミングスクールも数多く出てきたので学ぶには良い環境になってきていますね　TechAcademyでは１週間の無料体験ができるのでここからWebアプリケーションの基礎を学んでみるのも良いかもしれませんね！⇒　TechAcademyの無料体験

なお以下の内容は元々原文は英語ですのでぜひチェックしてみてください！画像もあるのでこのページを印刷して原文を見ながら実装すると良いかもしれません！ご参考になれば幸いです！

How To Build a Twitter Clone Without Code

Learn how to create your own no-code Twitter clone, using Bubble's visual web editor.

No Code　ノー・コードでTwitterクローンを作成する方法

BubbleのビジュアルWebエディターを使用して、独自のコードなしのTwitterクローンを作成する方法を学びます。始める前に、まず無料のBubbleアカウントを登録する必要があります。また、最も一般的なバブル機能をステップバイステップで紹介する紹介レッスンを完了することをお勧めします。

Twitterメインページ

ソーシャルネットワークでユーザーが期待する機能を提供するために、Twitterなどのサイトが必要とするメインページについて考えます。これらのページは、ユーザーが新しいツイートを投稿し、プラットフォームのコミュニティで利用できるようにするために使用する主要なインターフェイスとして機能します。

Bubbleの機能の1つは、データをページに送信する機能です。つまり、1つの単純なデザインで、ページの1つの汎用バージョンを作成するだけで済みます。Bubbleはこのデータを使用してページ上の要素を自動的に入力します。この情報は、外部の設定を必要としないBubbleデータベースに保存されます。Bubbleは、ページの保存データを使用して、画像、タイトル、ユーザーの説明などを適切なグループやテキスト要素に自動的に伝達します。つまり、プロフィールや投稿ごとに何千もの異なるページを作成する必要はありません。

ホームページには、他のユーザーからの最新の更新プログラムのフィードすることを示している（インデックスページを使用することができます）。プライバシールールによっては、ユーザーがログインしているかログアウトしているかに基づいて変更できます。

ログインメッセージ：ユーザーがログアウトされている場合は、ログインしてくださいというメッセージを表示して、訪問者がソーシャルネットワークに参加してコンテンツに貢献するように促してください。

ユーザーとユーザーが投稿したツイートに関する情報を表示するプロフィールページ。

必要なデータ型

バブルデータベースにはテーブルがあります。バブルでは、「データ型」ごとにテーブルがあります。バブルのデータタイプには列として表されるフィールドがあり、テキスト、数値、はい/いいえ（バイナリ）など、フィールドが持つデータのタイプを定義します。

一部のユーザーは、基本的にデータベースの設定であるデータタイプの設定から始める方が簡単であると感じています。すべてのBubbleアプリには、ニーズに合わせて構成できる組み込みデータベースが付属しています。つまり、セットアップの手間は不要です。

アプリで必要な「もの」のタイプごとに1つのデータタイプが必要です。これらの各データ型には、そのデータのプロパティを保持するフィールドが含まれている必要があります。ページの作成を続けると、ページ上の要素は、さまざまなデータ型のさまざまなフィールドに描画されます。

データタイプ：

ユーザー-これはデフォルトでBubbleアプリに付属しています

フィールド：

メール（デフォルトで含まれています）; ファーストネーム; 苗字; プロフィールの写真; ハンドル（Twitterのように）; 彼らが作成したツイートのリスト。

注：データのタイプも設定されているため、各フィールドがどのタイプのデータであるかがわかります。たとえば、名はテキストの一部であるため、データタイプとして「テキスト」を選択します。同様に、「Tweets Made」はツイートのリストです。

コンテンツ（ツイートのコンテンツ）; 画像（オプションのツイート内の画像）; 地理的な住所である場所。

これらは必要最小限のフィールドです。より多くの機能を構築するにつれて、より多くのデータ型とフィールドを追加する可能性があります。たとえば、投票やgifなどを追加して、ソーシャルネットワークを本当にインタラクティブにすることができます。特定の日時に達したときにツイートを公開するだけのスケジューリングシステムを構築することもできます（ツイートタイプにyes / noの値である公開データフィールドが必要です）。

データ型/フィールドはいくつでも持つことができます。次に、さまざまなデザイン要素を非表示または表示したり、それらのデータに基づいてアプリの動作を変更したりできます。

コア機能

ページデザイナと組み込みのデータベースに加えて、同様に重要なバブル機能の中核となるのは「ワークフロー」です。

ワークフローを使用すると、「Xが発生したときにアクションA、B、Cなどを実行する」という形でロジックを定義できます。

実際には、「if X、then A、B、C」ステートメントは、Webサイトのほとんどの機能の基本的な構成要素です。これらのステートメントは、ページでユーザーが目にするものと、背後にあるデータベースを結び付けます。

バブルでは、これを行う主な方法は、「ワークフロー」にグループ化された「アクション」のリストを使用することです。

各ワークフローは、「イベント」が発生すると（たとえば、ユーザーがボタンをクリックするか、ページが完全に読み込まれると）発生し、それに応じて一連の「アクション」を実行します（たとえば、「ユーザーのサインアップ」、「変更データベース」または「要素の非表示/表示」など）。

ワークフローの基本を始めるには、次の機能を構築する必要があります。

ユーザー登録

「ユーザーのサインアップ」ワークフローアクションのリファレンスを確認します

「Sign up」というテキストを含むButton要素を作成します。

要素をクリックして、「ワークフローの開始/編集」を選択します。

ワークフローで、サインアップボタンが押されたときにクリックして新しいアクションを作成します。

組み込みのバブルサインアップを使用するには、[アカウント]> [ユーザーをサインアップ]を選択します

必要に応じて、アカウント>「ソーシャルネットワークでのサインアップ/ログイン」を使用して、GoogleまたはFacebookログイン（「OAuth」）を実行します

Twitterプロフィールの作成

フォームをデザインし、ユーザーがボタンをクリックしてプロフィール画像、ハンドル、フルネームを保存できるようにします。ワークフローは、両方のデザイン面（フォーム）を以前に作成したデータ型に結び付けます。

名の入力

姓の入力

ユーザーの経歴のための「マルチライン入力」

ユーザープロフィール画像の画像アップローダー要素

「プロファイルの保存」ボタン

注：入力フィールドは、Bubbleのデータベースが予期しているデータのタイプと一致する必要があります。たとえば、名前フィールドのコンテンツ形式は「テキスト」である必要があり、プロフィール写真データフィールドは「画像」である必要があります。つまり、適切なタイプのデータを取得するには画像アップローダー要素が必要です。年齢などの追加のフィールドがある場合は、アルファベットの書き込みが許可されないように、それらにコンテンツ形式の「番号」を指定する必要があります。

次に、ワークフローを使用してユーザーのプロファイル情報を保存します。

フォームの[ プロファイルの保存]ボタンをダブルクリックし、プロパティメニューの[ ワークフローの開始/編集]をクリックします。

これは、ボタンがクリックされたときに、ロジックをボタンに関連付けたいことをバブルに伝えます。

次に、「モノに変更を加える」ステップを選択します。

この場合、アプリケーションに現在ログインしているユーザーに変更を加えています。

ワークフローが[ボタン保存プロファイルがクリックされたとき]をトリガーするように設定されているため、ユーザーが緑色のボタンをクリックしてフォームを送信すると、ワークフローが実行されます。

上記のように入力のデータを使用して、「現在のユーザーに変更を加える」アクションを作成します。

変更するもの=「現在のユーザー」

First Name = ‘Input Enter your first name’s value’

姓= ‘姓の値を入力してください’

Profile Pic = ‘ PictureUploader Upload profile pic！’ s value ‘

Handle = ‘ MultilineInput Enter your bio…’ s value ‘

「ツイート」を公開フィードに投稿する

1）複数行の入力要素と2）ユーザーがクリックできる「投稿」ボタン要素を作成します。次に、そのマルチライン入力要素のコンテンツを使用して、データベースに新しいツイートを作成するワークフローを設定します。その後、データベースから作成されたすべてのツイートのリストまたはフィードをページに表示して、ユーザーが全員の投稿を表示できるようにします。

フォームは次のようになります。

ワークフローを作成します。

「投稿」ボタンをクリックします>新しいモノのアクションを作成します>タイプ=ツイートします。（これにより、「投稿」ボタンがクリックされたときに、新しいツイートを作成することがBubbleに指示されます）。

灰色のプロパティメニューで、データを保存するフィールドを設定してツイートを作成できます。

「Content = MultilineInput’s What do you want to post … ‘s value」を設定して、ツイートにマルチライン入力ボックスのテキストが含まれるようにします。ここでは、[場所]または[画像]フィールドをスキップできます（後でいつでも実行できます）。

次に、「新しいツイートを作成する」アクションの後に「関連する入力をリセットする」アクションを追加します。

これにより、ツイートが作成されると、入力からテキストが削除されるため、ユーザーは、入力した古いテキストを削除する必要なく、何かを投稿できます。

これで、ツイートがデータベースに保存され、Bubbleが自動的に追加するデフォルトのデータ（ツイートを作成したユーザーアカウント、ツイートが作成された時間、ツイートの一意のIDなど）が保存されます。

Twitterフィードを作成する

次のステップは、ツイートフィードを作成して、データベースに保存されているすべてのツイートを表示することです。これを行うには、任意のサイズのバブルエディタのサイドバーにある要素タイプから「繰り返しグループ」要素を追加します（ここでは4行1列です）。

「データソース」=「ツイートを検索」を設定-データベースに保存されているすべてのツイートが表示されます（以前のフォームを使用してユーザーが作成したもの）。

セル＃1内にテキスト要素を追加して、「現在のセルのツイートのコンテンツ」を表示します。

（同様に、先に進んで、「現在のセル」のツイートの画像を表示する画像要素を追加できます。）これらは、繰り返しグループの各セルに入力されます。

ユーザーはTwitterで通常行うように繰り返しグループをスクロールでき、セルはデータベースに保存されているさまざまなツイートすべてをスクロールします。繰り返しグループは非常に強力であり、現在のユーザーが作成したツイートや特定のハッシュタグのあるツイートのみを表示するなどの操作にフィルターや制約を追加できます。

ログインしたユーザーにツイートを表示するが、一般的なツイートフィードをログアウトしたユーザーに表示する

ログインユーザーとログアウトユーザーに異なるツイートを表示するには、ツイートフィードリピーティンググループに条件を作成します。

繰り返しグループ要素のバブルの[ 条件付き]タブを使用して、条件付きステートメントを作成します：

「現在のユーザーがログインしているとき」>データソース=「ツイートを検索」>タイプ=ツイート、作成者=現在のユーザー。

この条件が満たされると、繰り返しグループには、「現在のユーザー」、つまりログインしたユーザーによって「作成者」となったツイートのみが表示されます。

これは、さまざまなユーザーにさまざまなデータを表示するための優れた方法です。

覚えておいてください：リピーティンググループはそれぞれ1つのデータタイプしか持つことができません。表示するデータのタイプを現在のユーザーが作成した「ツイート」以外に変更することはできません。他のユーザーを表示したい場合は、別のリピーティンググループが必要です。

追加機能

プライバシーとセキュリティ：アプリの基本を理解したところで、データのセキュリティを維持するためのプライバシールールと条件を設定することを忘れないでください。

[ データ]タブの[ プライバシー]セクションの役割から始めます。APIチェッカーを使用して、意図せずにデータを公開していないかどうかを確認することもできます。