自己紹介
はじめまして!株式会社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
プロパティを表示するように設定することで上手く表示することができました。
でめたしでめたし