自己紹介
はじめまして！株式会社Hajimariでエンジニアを担当している保坂(@michael_progs)と申します。
今年の4月に新卒として入社しました。
普段は大きく分けて次の3つの業務を行っています。
今回はプログラミングなしで、サービスを作ることが出来るNoCodeについて書いていきます。
(NoCodeはエンジニアから見てもかなり感動するツールでした)
NoCodeとは
読んで字の如く、コードを書かずにサービスを開発できるツールのことです。
例えば何かサービスを作るときに、エンジニアがプログラミングをする必要があると思います。
しかしNoCodeを使えば、プログラミングをせずにサービスを作ることが出来ます！
今回僕も初めてNoCodeを使ってみたのですが、本当に感動しました。こんなにも短時間でクオリティの高いサービスが出来てしまうのかと。。。
ただ現状のNoCodeのツールでは、やはりエンジニアリングの知識が合ったほうがスムーズに開発できるように感じました。
なので、非エンジニアの方がNoCodeを使ってサービスを作るのには、現段階では少しだけハードルが高い気がしました。
しかし本当に革新的なツールなので、今後はNoCodeの需要が伸びていきそうです。NoCodeのこれからが楽しみです。
僕は今回bubbleというサービスを使いました。 bubble を選択した理由は以下の2つです。(気軽に選びました)
なぜNoCodeを触ってみようと思ったか
リアルカレッジ受講生が以下のNoCodeハッカソンに出場することになり、僕もその子達を応援したいと思ったからです。 ただ今までNoCodeを一度も触ったことがなかったので、この機会に触ってみようと思い挑戦してみました。
NoCode触ってみた
実際にNoCodeを使って、ツイートを投稿出来るサービスを作ってみました。開発にかかった時間は60分くらいで、画面を見ながら直感的にサービスを作ることが出来ました。NoCode本当にすごいです！僕が60分で作ったサービスはこちらになります。
ツイートを投稿するだけの簡単なサービスですが、サイトのレスポンスも非常に速く、作っていてとても楽しかったです。 慣れてしまえば10分くらいで、同じようなものが出来てしまいそうです。
今回作ったツイートを投稿できるサービスの作り方の手順を簡単に載せておきます。
まずbubbleを開き、NEW APPよりアプリを新規で作成します。
次にアプリ名を設定しますが、このアプリ名がサブドメインになるので、他で使われていない名前にする必要があります。
早速投稿フォームを作っていきます。(もともとあったエレメント(要素)やコンテナ(ブロック)などは削除しておきました)
左のメニューからInput forms > Inputを選択して、入力フォームを配置します。
次にボタンを配します。先ほどと同様に左のメニューからVisual elements > Button を選択してボタンを配置します。
ボタンの中のedit meをクリックして、投稿に書き換えます。
次にDBにTweetテーブルを作成します。左のメニューから、Data を選択し、New TypeのところにTweetと入れてCreateをクリックします。
Tweetテーブルが作成されるので、続いてmessageというツイートを保存するカラムを追加していきます。
Create a new fieldをクリックして、以下画像のように設定します。
これでTweetテーブルの作成は完了です！
次に投稿ボタンをクリックしたときにツイートをTweetテーブルに保存するようにしていきます。
左のメニューからWorkflowを選択し、以下画像のようにElements > An element is clickedを選択します。
選択後は以下の画像のような感じになります。
ここで上記画像のWhenをクリックして、出てきたポップアップウィンドウのElementのところに先程追加したボタンを選択します。
これで投稿ボタンをクリックしたときに何かしらのイベントを実行できるようになります。早速イベントを登録していきます。
Click here to add actionをクリックして、Data > Create a new thingを選択してください。
その後出てきたポップアップウィンドウに以下のように設定してください。
これでツイートを投稿ボタンをクリックしたときに、ツイートをDBに登録できるようになりました！
左のメニューのData > App data > All Tweetsからデータが登録できているか確認できます。
いよいよ投稿したツイートを表示していきましょう！ (実は投稿したツイートを画面に表示出来ずに40分くらい悩みました。。。)
まず投稿したツイートを表示するボックスを容易します。
左のメニューからContainer > Repeating Groupをクリックして以下画像のように設定してください。
次にRepeating Group の上に Text というエレメントを配置して次のように設定します。
これで右上のPreviewをクリックするとツイートが表示されていると思います！
めでたしめでたし
最後に
株式会社Hajimariでは、自社開発・受託開発を行っています。
一緒にLaravelやVue.jsを使って開発してくれるエンジニア・デザイナーを絶賛募集しています！
新卒・中途どちらも募集しておりますので、興味のある方は以下の記事をぜひ御覧ください！
みなさまとお会いできるのを心からお待ちしております。
躓いたところ共有しておきます
その原因は次の2つでした。
- データを表示するエレメント(要素)を配置していなかったこと
- データ型を間違えていたこと
まず1つ目についてですが、データベースに存在する値を表示するときは、Repeating Group というエレメント(以下画像の赤色部分)を配置するだけで表示できると思いこんでしまっていました。
実際にはRepeating Group の上に Text というエレメント(以下画像の青色部分)を配置する必要がありました。
ここに気づくまでにかなり時間がかかってしまいました。。。
2つ目がデータ型を間違えていたことです。
最初僕はTweetオブジェクトに存在するmessageというプロパティを表示したかったので、以下画像のようにData sourceを設定してしまっていました。。。
正しくは以下画像のようにData sourceに設定する値の型をType of contentに合わせて、Textエレメント上でTweetオブジェクトのmessageプロパティを表示するように設定することで上手く表示することができました。
でめたしでめたし
