日本発ノーコードアプリ開発ツール『Click』

【初心者向け】Googleカレンダーのクローン作成・前編|ノーコード開発ナレッジ【Bubble】

今回作成するもの

Bubble公式で記載されているチュートリアルを翻訳し、分かりやすくブラッシュアップしました。
初心者を対象としていますので、前編だけでもミニマムな機能は実装することができます。
ひとつひとつクリアしていきましょう。

参照先:https://bubble.io/blog/build-google-calendar-clone-no-code/

使用エレメント

  • Calendar(Plugins)
  • Text
  • Input
  • Popup
  • Button
  • Date/TimePicker

作成手順

1. データの作成

まずデータのtypeとfieldを作成していきましょう。

今回はtypeをCalendarにnameとdescription、start、endを追加してあげます。
意味合いは、予定名(text)、予定内容(text)、予定開始時間(date)と終了時間(date)になります。

2. エレメントの配置

全体のエレメント配置から説明していきます。

今回はプラグインを使用するので、まずPluginsタブからインストールしましょう。
公式から出ているFull Calendarというものです。

 

インストールが完了すると、エレメントタイプ一覧にCalendarが増えています。
そちらを配置してください。

type of eventsを先ほど作成したCalendarに、Data sourceはCalendarの全てのデータを取得したいので、Do search を選択後、Calendarを選択します。
Start time fieldは開始時刻のことなのでstart、End time fieldは終了時刻であるendを選択します。
Event captionとはカレンダーに表示するためのタイトルのことなので、Current eventsのnameを選択します。

少しややこしく感じるかもしれませんが、下記の画像の通り実装すればOKです。

次に予定作成するためのエレメントを配置します。
Popupの中にText、Input、Date/TimePicker、Buttonを下記の画像のように配置します。
詳しくは左のエレメントツリーを参照してください。

アイキャッチ画像を設定

日付を受け取るために、Popupのtype of contentにdateを選択しておきます

Date/TimePickerはinput typeをDateからDate&Timeに変更することで画像のようにエレメントの形が変化します。

下記のようにinputのPlaceholderを変更することで、より親切な作りになります。

initial contentに先ほど設定したPopupの日付を受け取る設定を記載します。
これはstartとendどちらにも行ってください。

次に予定を確認するためのエレメントを配置します。
Popupの中にText、Buttonを下記の画像のように配置します。
詳しくは左のエレメントツリーを参照してください。

PopupのType of contentにCalendarを設定します。

次にテキストの内容を設定します。
ここではカレンダーのname、description、start、endを表示したいので、順に実装していきます。

先ほどPopupにCalendarを設定したので、Parents group Calendarが選択できます。
その後nameを選択して完了です。

descriptionも同じ要領で実装してください。

次は時間を表示させるために同じ要領でstartとendの実装もしていきます。
ただしBubbleのdate型はデフォルトでアメリカ基準の表示になっており、かなり読みにくいので変更していきます。

そのためには:formatted as 今日の日付を選択、Format typeをCustom選択します。

Custom formatという項目が出てくるので、yyyy/mm/dd HH:MMと入力

サブメニューを閉じれば下記のようになっています。
ここで表示される時間帯は今の時間帯が仮置きで表示されます。

 

3. ワークフローの作成

次にワークフローを作っていきます。

まずはワークフローのClick here to add in eventをクリックし、ElementsのA calendars day is clickを選択します。

予定を作成するPopupを表示し、display dataでPopupにカレンダーの選択したその日付を送信するワークフローを記載します。

次に予定作成Popup内にある作成ボタンを実装していきます。

まず予定を作成するワークフローをかき、inputをリセットし、Popupを非表示にするように記載します。
詳しくは下記画像を参照してください。

以上で予定を作成するワークフローの完成です。

次に予定をクリックした際、詳細が表示されるワークフローを組みます。
同じようにClick here to add in eventをクリックし、先ほどとは違い次はElementsのA calendars event is clickを選択します。

そこに詳細を表示するアクションと、desplay dataでそのPopupに予定の内容を送信するアクションを記載します。

次に詳細Popupの中にある閉じるボタンにPopupを非表示するアクションを追加し、完成です。

実際に使ってみた

カレンダーに表示されている日付をクリックすると、作成するポップアップが表示され、カレンダーにある予定をクリックすると、予定の詳細が確認できます。

今回は以上で予定の作成と詳細確認の実装ができました。
次回は予定の編集と削除を実装したいと思います。

下地は完成してるので、次回はより楽に実装できると思います。