paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

logo

ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

ブロックを繋げるだけ!Supabase連携も可能なノーコードアプリ開発「Teta」を使ってみた!

f:id:paiza:20220105132315j:plain

どうも、まさとらん(@0310lan)です!

今回は、誰でも簡単に高度なスマホアプリを開発できる無料のWebサービスをご紹介します!

さまざまな機能をブロック化しており、それらをつなぎ合わせるだけで好きなアプリを手軽に構築できるWebエディタを提供しているのが特徴です。また、オープンソースで開発が進められているデータベース「Supabase」とも簡単に連携できるので本記事で詳しく解説していきます。

アプリ開発にご興味ある方は、ぜひ参考にしてみてください!

Teta

f:id:paiza:20220105132410j:plain

■「Teta」の使い方

それでは、「Teta」をどのように使えばいいのか詳しく見ていきましょう!

最初に画面上部にある【Join the Alpha】ボタンをクリックして無料のユーザー登録を済ませておきます。

f:id:paiza:20220105132451j:plain


いくつかオプションが用意されていますが、今回はGitHubアカウントを利用してみます。

f:id:paiza:20220105132504j:plain


認証が完了すると、簡単な質問に答えるフォームが表示されます。

f:id:paiza:20220105132519j:plain


最終的に以下のようなダッシュボードが表示されたら準備完了です!

f:id:paiza:20220105132533j:plain

この画面から新規プロジェクトを作成・管理できるようになります。

また、「Teta」は現在アルファ版を公開したばかりの段階ということもあり、今後のアップデート内容やコミュニティへの参加リンクも表示されているので、ご興味ある方は合わせて確認してみてください。

■「Teta」を利用したアプリ開発

ここからは「Teta」のエディタを利用して、どんな感じにアプリを開発していくのかを詳しく見ていきましょう。

まずはダッシュボードから「+」アイコンをクリックして新規プロジェクトを作成します。

f:id:paiza:20220105132601j:plain


アプリを開発するための専用エディタが表示されます。

f:id:paiza:20220105132616j:plain

エディタの画面左側がアプリのプレビューになっており、右側に専用のブロックエディタが搭載されています。

このブロックエディタを利用して必要な機能をどんどん追加していくだけで、自分がイメージするアプリを構築していけるように設計されているのが特徴です。


そこで、まずは空っぽの状態になっているので「コンテナ要素」を追加してみましょう!

【Add To Body】の箇所をクリックしてみてください。

f:id:paiza:20220105132630j:plain


「Teta」が提供しているさまざまな機能を持ったコンポーネントブロックが表示されるので、その中にある【Container】を選択しましょう。

f:id:paiza:20220105132643j:plain


エディタにコンテナ要素が追加されました!

f:id:paiza:20220105132658j:plain

画面右側にはコンテナ要素のオプションやパラメータなどを調整できるウィンドウが表示されているのが分かります。


試しに塗りつぶしのカラーを白色に変更してみましょう。

すると、プレビュー画面もリアルタイムに同期するので、背景が白色に変化するのが分かります。

f:id:paiza:20220105132715j:plain

このようにコンポーネントブロックを追加して、パラメータを調整することでアプリを構築していくのが基本的な操作になります。


それでは、このままInstagramのように画像をグリッド表示させる画面を作ってみましょう。

今度は【Grid view】というコンポーネントブロックを追加してみます。

f:id:paiza:20220105132729j:plain


さらにそのあとに続けて【image】コンポーネントも追加します。

f:id:paiza:20220105132743j:plain


【image】コンポーネントは好きな画像を表示できる機能を提供しており、以下の部分に画像のURLを貼り付けるだけでOKです。

f:id:paiza:20220105132800j:plain

例えば、無料で画像素材を提供している「Unsplash」などのサービスを利用してURLをコピペすると簡単です。


同じように複数の【image】コンポーネントを追加していくだけで、画像を簡単にグリッド表示させることができます。

f:id:paiza:20220105132821j:plain


次に、スマホ画面の上部が見えづらいので、全体的に中央に配置させてみましょう。

この場合は【Column】コンポーネントブロックを追加して、オプションを「Center」に変更すればOKです。

f:id:paiza:20220105132837j:plain


ついでにテキストも追加してみましょう!

【Column】コンポーネントは複数の要素を追加できるので、【Add New】の部分をクリックします。

f:id:paiza:20220105132852j:plain


【テキスト】コンポーネントブロックを追加して、オプションから「Value」の箇所に文字を入力すれば表示されます(※パラメータもお好みで調整しておきましょう)。

f:id:paiza:20220105132907j:plain


テキストをスマホ画面の上部に配置したいので、【Column】コンポーネントのリストアイコンをクリックします。

f:id:paiza:20220105132919j:plain


テキスト要素をドラッグして上部に配置すればOKです。

f:id:paiza:20220105132930j:plain


最後にメニューから【Play Mode】ボタンをクリックしてみましょう。

f:id:paiza:20220105132943j:plain


全画面で作成したアプリを表示させることができます。

f:id:paiza:20220105133000j:plain

アクションイベントを設定している場合は、このままアプリを操作して確認もできるので便利です。


また、作成したアプリのソースコードも表示できます。

f:id:paiza:20220105133018j:plain

これはFlutterをベースにしたコードになっており、無料でダウンロードして活用することもできます。ちなみに将来的には「Teta」のサービスだけで、各アプリストアへ配信できるように計画されています。

■Tinder風の画像ミニアプリを作ってみよう!

「Teta」は単体でもかなり多彩なアプリを開発できるのですが、データベースと連携した本格的なアプリ開発にも対応しています。

現在はオープンソースの「Supabase」を利用したデータベースを手軽に導入できるようになっているので、簡単なアプリを作りながら使い方をご紹介しておきます。


作成するのはTinderのように画像をスワイプできる以下のようなアプリです。

f:id:paiza:20220105133041g:plain


「Supabase」で作成したデータベースから画像を取得するアプリを作っていきましょう。

まずは「Supabase」のサイトにアクセスして、無料のユーザー登録を済ませておきます(すでに取得済みの方はスキップしてください)。

Supabase

f:id:paiza:20220105133120j:plain


ユーザー登録ができたら、新規にデータベースのテーブルを作成します。名称は何でも構いませんが、今回は「card」としておきます(※この名称はあとで使うので覚えておきましょう)。

f:id:paiza:20220105133130j:plain


次に【Add column】ボタンをクリックして、画像データを格納するための列を作成しておきます。

f:id:paiza:20220105133144j:plain

【Name】は「img」とし、【Type】は「text」に設定しておきましょう。


そして、【+Insert row】ボタンから、先ほど作成した列に画像URLをいくつか追加しておきます。

f:id:paiza:20220105133158j:plain

この画像URLを「Teta」のアプリから読み込んで表示させるというわけです。


最後に設定から「API」の項目にアクセスして、「Anon Key」と「URL」をコピーしておきましょう。

f:id:paiza:20220105133213j:plain


今度は「Teta」のエディタに戻り、連携ボタンをクリックして【+Supabase】を選択します。

f:id:paiza:20220105133226j:plain


先ほどコピーした「Anon Key」と「URL」を貼り付けて【Confirm】ボタンをクリックすればデータベースとの連携が完了します!

f:id:paiza:20220105133237j:plain


あとはアプリの画面を構築するだけです!

利用するのは【Supabase future builder】というコンポーネントです。

f:id:paiza:20220105133253j:plain

オプション画面にある【From】の部分に、作成したテーブルの名称を入力し、【Select】の部分に取得する列の名称を指定します。

今回の場合だと、テーブルの名称は「card」になり、取得する列の名称は「img」となります。ちなみに列の名称は「,(カンマ)」区切りで複数指定可能で、「id, img」のように入力することもできます。


次に画像をスワイプできるようにするため、【Tcard builder】コンポーネントを追加します。

f:id:paiza:20220105133307j:plain

オプション画面の【From】には、【Supabase future builder】を設定します。


そして、画像コンポーネントを追加して、オプションの形式を【dataset】に変更したらSupabseの「img」列を指定します。

f:id:paiza:20220105133322j:plain

これでSupabaseに格納した画像URLを読み込めるようになります。


プレビューを確認するとこんな感じになります!

f:id:paiza:20220105133347g:plain

うまく画像が読み込まれているのが分かりますね。

もちろんデータベースの画像URLを新しく追加していけば、「Teta」で作成したアプリにも自動で反映されます。

■ユーザー登録機能を実装してみよう!

多くのアプリやサービスでは、ユーザー登録(ログインも含む)をしてから利用できるように設計されています。このような機能も、「Teta」と「Supabase」を活用すれば簡単に実現できるので、合わせて概要を解説をしておきます。


今回作成するのはユーザー登録用のフォーム画面になります。

f:id:paiza:20220105133434j:plain

メールアドレスとパスワードを入力するボックスと、「ユーザー登録ボタン」「ログインボタン」を配置しています。


フォーム部品を配置したあとに、ユーザー登録用のボタンに新規のアクションイベントを設定します。

f:id:paiza:20220105133536j:plain

アクションは「+」アイコンをクリックしてから、「Supabase」「On tap」「Sign up」をそれぞれ設定します。

これだけでボタンをタップすればユーザー登録が実行できるようになります。


ユーザー登録後に遷移する画面のページを選択したら、注意を促すメッセージが表示されているのに気づくと思います。

f:id:paiza:20220105133551j:plain

これはユーザー登録やログインに「メールアドレス」と「パスワード」が必要になることを教えてくれています。これはあとで設定するので、このまま【Generate】ボタンをクリックしましょう。

ログインボタンにも同じようにアクションを設定するのですが、「Sign up」ではなく「Sign in with credential」を選択することに注意してください。


次に、フォームの入力ボックスにもそれぞれアクションを設定します。

f:id:paiza:20220105133606j:plain

「State」「On change」「Change with」に続けて、それぞれ「Email」「Password」を指定しましょう。

これで準備は完了です!


プレビューから実際にメールアドレスとパスワードを設定して、ユーザー登録を実行してみましょう!

f:id:paiza:20220105133621j:plain

登録後に指定した画面に自動で遷移します。


また、Supabaseの【Users】を見てみると、追加されたユーザーを確認できます。

f:id:paiza:20220105133634j:plain

登録が確認できたら、ログインボタンも動作するか確認しておくといいでしょう。

このように手軽な操作でユーザー登録機能を実装できるので、会員専用のアプリを開発するのも簡単ですね。

■動画&ゲームでプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、Go、Kotlin、JavaScript、HTML/CSS、SQLなど、プログラミング初心者でも動画で学べる体験・入門レッスンを公開しています。

Python体験編」「C#体験編」「ITエンジニアの就活準備編」といった人気講座は完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

また、「STEINS;GATE(シュタインズ・ゲート)」とpaizaがコラボしたプログラミングゲーム「電脳言語のオルダーソンループ」をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください!

■まとめ

今回はブロックをつなげていくだけで誰でも簡単にスマホアプリを開発できるWebサービスをご紹介しました!

多彩なアプリが開発できるように、あらかじめ多種多様なコンポーネントが用意されているのですが、実は自分でオリジナルのコンポーネントを作成できる機能も提供されています。また、ロードマップを見ると新機能もぞくぞくと追加される予定であることが分かります。

これからアプリ開発を始めたいという人、すでに経験のある方も含めてぜひオリジナルのアプリを開発して友人・知人とシェアしてみてください!


<参考リンク>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.